chore: Combine search keybinding definitions

fix: showPopup replace error (#82 )
Error: "TypeError: Cannot read properties of undefined (reading 'replace')"
2026-01-11 23:02:55 +01:00 · 2024-11-18 17:50:41 +01:00 · 2024-11-18 17:06:10 +01:00 · 2024-11-18 17:01:49 +01:00 · 2024-11-13 13:35:03 +01:00 · 2024-11-12 15:50:49 +01:00
111 changed files with 1545 additions and 1145 deletions
--- a/.github/workflows/build-noodl-editor.yml
+++ b/.github/workflows/build-noodl-editor.yml
@@ -1,15 +1,15 @@
-name: Build noodl-editor
+name: Build fluxscape-editor

 on:
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
-        
+
  # Allows you to run this workflow from another workflow
  workflow_call:

  # release:
  #   types: [created]
-    
+
 jobs:
  build_noodl_editor:
    runs-on: ${{ matrix.os }}
@@ -32,11 +32,11 @@ jobs:
            platform: linux-x64

    steps:
-      - if: ${{ matrix.platform == 'darwin-arm64' }} 
+      - if: ${{ matrix.platform == 'darwin-arm64' }}
        name: Setup
        uses: actions/setup-python@v5
        with:
-          python-version: '3.11' 
+          python-version: '3.11'

      - name: Checkout
        uses: actions/checkout@v4
@@ -72,6 +72,6 @@ jobs:
      - name: Upload artifact
        uses: actions/upload-artifact@v3
        with:
-          name: noodl-editor-${{ matrix.platform }}-${{ github.head_ref }}-${{ github.sha }}
+          name: fluxscape-editor-${{ matrix.platform }}-${{ github.head_ref }}-${{ github.sha }}
          path: publish
-          retention-days: "12"
+          retention-days: '12'
--- a/.github/workflows/test-noodl-editor.yml
+++ b/.github/workflows/test-noodl-editor.yml
@@ -1,4 +1,4 @@
-name: Test noodl-editor
+name: Test fluxscape-editor

 on:
  # Allows you to run this workflow manually from the Actions tab
--- a/package-lock.json
+++ b/package-lock.json
@@ -2849,9 +2849,9 @@
      }
    },
    "node_modules/@electron/remote": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.1.1.tgz",
-      "integrity": "sha512-Lfxul2yBxL+FBVaKszNAkuUqSIDbUQ1I7BC394iRXyqA2XGz7im2bAxroNIM51jhySSPKUaOLHaFLxfV6pC9VQ==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.1.2.tgz",
+      "integrity": "sha512-EPwNx+nhdrTBxyCqXt/pftoQg/ybtWDW3DUWHafejvnB1ZGGfMpv6e15D8KeempocjXe78T7WreyGGb3mlZxdA==",
      "peerDependencies": {
        "electron": ">= 13.0.0"
      }
@@ -25220,13 +25220,13 @@
      }
    },
    "node_modules/electron": {
-      "version": "28.1.4",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-28.1.4.tgz",
-      "integrity": "sha512-WE6go611KOhtH6efRPMnVC7FE7DCKnQ3ZyHFeI1DbaCy8OU4UjZ8/CZGcuZmZgRdxSBEHoHdgaJkWRHZzF0FOg==",
+      "version": "31.3.1",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-31.3.1.tgz",
+      "integrity": "sha512-9fiuWlRhBfygtcT+auRd/WdBK/f8LZZcrpx0RjpXhH2DPTP/PfnkC4JB1PW55qCbGbh4wAgkYbf4ExIag8oGCA==",
      "hasInstallScript": true,
      "dependencies": {
        "@electron/get": "^2.0.0",
-        "@types/node": "^18.11.18",
+        "@types/node": "^20.9.0",
        "extract-zip": "^2.0.1"
      },
      "bin": {
@@ -25452,6 +25452,14 @@
        "tiny-typed-emitter": "^2.1.0"
      }
    },
+    "node_modules/electron/node_modules/@types/node": {
+      "version": "20.14.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz",
+      "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
    "node_modules/elliptic": {
      "version": "6.5.4",
      "dev": true,
@@ -27203,6 +27211,10 @@
        "react": "^15.0.2 || ^16.0.0 || ^17.0.0"
      }
    },
+    "node_modules/fluxscape-editor": {
+      "resolved": "packages/noodl-editor",
+      "link": true
+    },
    "node_modules/focus-lock": {
      "version": "0.8.1",
      "dev": true,
@@ -35443,10 +35455,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/noodl-editor": {
-      "resolved": "packages/noodl-editor",
-      "link": true
-    },
    "node_modules/nopt": {
      "version": "1.0.10",
      "license": "MIT",
@@ -43191,6 +43199,11 @@
      "version": "1.13.6",
      "license": "MIT"
    },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+    },
    "node_modules/unfetch": {
      "version": "4.2.0",
      "dev": true,
@@ -48967,9 +48980,10 @@
      "dev": true
    },
    "packages/noodl-editor": {
-      "version": "1.0.0",
+      "name": "fluxscape-editor",
+      "version": "1.1.0",
      "dependencies": {
-        "@electron/remote": "^2.1.1",
+        "@electron/remote": "^2.1.2",
        "@jaames/iro": "^5.5.2",
        "@microsoft/fetch-event-source": "^2.0.1",
        "@noodl/git": "file:../noodl-git",
@@ -49025,7 +49039,7 @@
        "babel-loader": "^8.2.4",
        "concurrently": "^7.4.0",
        "css-loader": "^6.7.1",
-        "electron": "28.1.4",
+        "electron": "31.3.1",
        "electron-builder": "^24.9.1",
        "file-loader": "^6.2.0",
        "html-loader": "^3.1.0",
@@ -53375,9 +53389,9 @@
      }
    },
    "@electron/remote": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.1.1.tgz",
-      "integrity": "sha512-Lfxul2yBxL+FBVaKszNAkuUqSIDbUQ1I7BC394iRXyqA2XGz7im2bAxroNIM51jhySSPKUaOLHaFLxfV6pC9VQ==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.1.2.tgz",
+      "integrity": "sha512-EPwNx+nhdrTBxyCqXt/pftoQg/ybtWDW3DUWHafejvnB1ZGGfMpv6e15D8KeempocjXe78T7WreyGGb3mlZxdA==",
      "requires": {}
    },
    "@electron/universal": {
@@ -74057,13 +74071,23 @@
      }
    },
    "electron": {
-      "version": "28.1.4",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-28.1.4.tgz",
-      "integrity": "sha512-WE6go611KOhtH6efRPMnVC7FE7DCKnQ3ZyHFeI1DbaCy8OU4UjZ8/CZGcuZmZgRdxSBEHoHdgaJkWRHZzF0FOg==",
+      "version": "31.3.1",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-31.3.1.tgz",
+      "integrity": "sha512-9fiuWlRhBfygtcT+auRd/WdBK/f8LZZcrpx0RjpXhH2DPTP/PfnkC4JB1PW55qCbGbh4wAgkYbf4ExIag8oGCA==",
      "requires": {
        "@electron/get": "^2.0.0",
-        "@types/node": "^18.11.18",
+        "@types/node": "^20.9.0",
        "extract-zip": "^2.0.1"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "20.14.10",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz",
+          "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==",
+          "requires": {
+            "undici-types": "~5.26.4"
+          }
+        }
      }
    },
    "electron-builder": {
@@ -75408,6 +75432,144 @@
        "fbjs": "^3.0.1"
      }
    },
+    "fluxscape-editor": {
+      "version": "file:packages/noodl-editor",
+      "requires": {
+        "@babel/core": "^7.19.1",
+        "@babel/preset-react": "^7.18.6",
+        "@electron/remote": "^2.1.2",
+        "@jaames/iro": "^5.5.2",
+        "@microsoft/fetch-event-source": "^2.0.1",
+        "@noodl/git": "file:../noodl-git",
+        "@noodl/noodl-parse-dashboard": "file:../noodl-parse-dashboard",
+        "@noodl/platform": "file:../noodl-platform",
+        "@noodl/platform-electron": "file:../noodl-platform-electron",
+        "@svgr/webpack": "^6.4.0",
+        "@types/checksum": "^0.1.33",
+        "@types/jasmine": "^4.3.0",
+        "@types/jquery": "^3.5.14",
+        "@types/react": "^17.0.50",
+        "@types/react-dom": "^18.0.0",
+        "@types/remarkable": "^2.0.3",
+        "@types/rimraf": "^3.0.2",
+        "@types/split2": "^3.2.1",
+        "@types/string.prototype.matchall": "^4.0.1",
+        "@types/underscore": "^1.11.4",
+        "@types/webpack-env": "^1.18.0",
+        "about-window": "^1.15.2",
+        "algoliasearch": "^4.14.2",
+        "archiver": "^5.3.0",
+        "async": "^3.2.4",
+        "babel-loader": "^8.2.4",
+        "classnames": "^2.3.2",
+        "concurrently": "^7.4.0",
+        "css-loader": "^6.7.1",
+        "diff3": "0.0.4",
+        "dmg-license": "^1.0.11",
+        "electron": "31.3.1",
+        "electron-builder": "^24.9.1",
+        "electron-store": "^8.1.0",
+        "electron-updater": "^6.1.7",
+        "express": "^4.17.3",
+        "file-loader": "^6.2.0",
+        "highlight.js": "^11.5.1",
+        "html-loader": "^3.1.0",
+        "isbinaryfile": "^5.0.0",
+        "md5": "^2.3.0",
+        "md5-file": "^5.0.0",
+        "mixpanel-browser": "^2.45.0",
+        "mkdirp": "0.5.1",
+        "mkdirp-sync": "0.0.2",
+        "monaco-editor": "^0.34.0",
+        "monaco-editor-webpack-plugin": "^7.0.1",
+        "ncp": "^2.0.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.0",
+        "react-hot-toast": "^2.4.0",
+        "react-instantsearch-hooks-web": "^6.38.0",
+        "react-json-view": "^1.21.3",
+        "react-rnd": "^10.3.7",
+        "remarkable": "^2.0.1",
+        "rimraf": "^3.0.2",
+        "s3": "git+https://github.com/noodlapp/node-s3-client.git",
+        "sass": "^1.55.0",
+        "sass-loader": "^12.6.0",
+        "string.prototype.matchall": "^4.0.7",
+        "stringify": "^5.2.0",
+        "style-loader": "^3.3.1",
+        "ts-loader": "^9.4.1",
+        "ts-node": "^10.7.0",
+        "typescript": "^4.8.3",
+        "underscore": "^1.13.6",
+        "url-loader": "^4.1.1",
+        "webpack": "^5.74.0",
+        "webpack-cli": "^4.10.0",
+        "webpack-dev-server": "^4.11.1",
+        "webpack-merge": "^5.8.0",
+        "websocket-stream": "^5.5.2",
+        "ws": "^8.9.0"
+      },
+      "dependencies": {
+        "@webpack-cli/configtest": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
+          "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
+          "dev": true,
+          "requires": {}
+        },
+        "@webpack-cli/info": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
+          "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
+          "dev": true,
+          "requires": {
+            "envinfo": "^7.7.3"
+          }
+        },
+        "@webpack-cli/serve": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
+          "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
+          "dev": true,
+          "requires": {}
+        },
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
+        },
+        "rechoir": {
+          "version": "0.7.1",
+          "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
+          "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
+          "dev": true,
+          "requires": {
+            "resolve": "^1.9.0"
+          }
+        },
+        "webpack-cli": {
+          "version": "4.10.0",
+          "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
+          "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
+          "dev": true,
+          "requires": {
+            "@discoveryjs/json-ext": "^0.5.0",
+            "@webpack-cli/configtest": "^1.2.0",
+            "@webpack-cli/info": "^1.5.0",
+            "@webpack-cli/serve": "^1.7.0",
+            "colorette": "^2.0.14",
+            "commander": "^7.0.0",
+            "cross-spawn": "^7.0.3",
+            "fastest-levenshtein": "^1.0.12",
+            "import-local": "^3.0.2",
+            "interpret": "^2.2.0",
+            "rechoir": "^0.7.0",
+            "webpack-merge": "^5.7.3"
+          }
+        }
+      }
+    },
    "focus-lock": {
      "version": "0.8.1",
      "dev": true,
@@ -80983,144 +81145,6 @@
      "version": "2.0.10",
      "dev": true
    },
-    "noodl-editor": {
-      "version": "file:packages/noodl-editor",
-      "requires": {
-        "@babel/core": "^7.19.1",
-        "@babel/preset-react": "^7.18.6",
-        "@electron/remote": "^2.1.1",
-        "@jaames/iro": "^5.5.2",
-        "@microsoft/fetch-event-source": "^2.0.1",
-        "@noodl/git": "file:../noodl-git",
-        "@noodl/noodl-parse-dashboard": "file:../noodl-parse-dashboard",
-        "@noodl/platform": "file:../noodl-platform",
-        "@noodl/platform-electron": "file:../noodl-platform-electron",
-        "@svgr/webpack": "^6.4.0",
-        "@types/checksum": "^0.1.33",
-        "@types/jasmine": "^4.3.0",
-        "@types/jquery": "^3.5.14",
-        "@types/react": "^17.0.50",
-        "@types/react-dom": "^18.0.0",
-        "@types/remarkable": "^2.0.3",
-        "@types/rimraf": "^3.0.2",
-        "@types/split2": "^3.2.1",
-        "@types/string.prototype.matchall": "^4.0.1",
-        "@types/underscore": "^1.11.4",
-        "@types/webpack-env": "^1.18.0",
-        "about-window": "^1.15.2",
-        "algoliasearch": "^4.14.2",
-        "archiver": "^5.3.0",
-        "async": "^3.2.4",
-        "babel-loader": "^8.2.4",
-        "classnames": "^2.3.2",
-        "concurrently": "^7.4.0",
-        "css-loader": "^6.7.1",
-        "diff3": "0.0.4",
-        "dmg-license": "^1.0.11",
-        "electron": "28.1.4",
-        "electron-builder": "^24.9.1",
-        "electron-store": "^8.1.0",
-        "electron-updater": "^6.1.7",
-        "express": "^4.17.3",
-        "file-loader": "^6.2.0",
-        "highlight.js": "^11.5.1",
-        "html-loader": "^3.1.0",
-        "isbinaryfile": "^5.0.0",
-        "md5": "^2.3.0",
-        "md5-file": "^5.0.0",
-        "mixpanel-browser": "^2.45.0",
-        "mkdirp": "0.5.1",
-        "mkdirp-sync": "0.0.2",
-        "monaco-editor": "^0.34.0",
-        "monaco-editor-webpack-plugin": "^7.0.1",
-        "ncp": "^2.0.0",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.0",
-        "react-hot-toast": "^2.4.0",
-        "react-instantsearch-hooks-web": "^6.38.0",
-        "react-json-view": "^1.21.3",
-        "react-rnd": "^10.3.7",
-        "remarkable": "^2.0.1",
-        "rimraf": "^3.0.2",
-        "s3": "git+https://github.com/noodlapp/node-s3-client.git",
-        "sass": "^1.55.0",
-        "sass-loader": "^12.6.0",
-        "string.prototype.matchall": "^4.0.7",
-        "stringify": "^5.2.0",
-        "style-loader": "^3.3.1",
-        "ts-loader": "^9.4.1",
-        "ts-node": "^10.7.0",
-        "typescript": "^4.8.3",
-        "underscore": "^1.13.6",
-        "url-loader": "^4.1.1",
-        "webpack": "^5.74.0",
-        "webpack-cli": "^4.10.0",
-        "webpack-dev-server": "^4.11.1",
-        "webpack-merge": "^5.8.0",
-        "websocket-stream": "^5.5.2",
-        "ws": "^8.9.0"
-      },
-      "dependencies": {
-        "@webpack-cli/configtest": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
-          "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
-          "dev": true,
-          "requires": {}
-        },
-        "@webpack-cli/info": {
-          "version": "1.5.0",
-          "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
-          "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
-          "dev": true,
-          "requires": {
-            "envinfo": "^7.7.3"
-          }
-        },
-        "@webpack-cli/serve": {
-          "version": "1.7.0",
-          "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
-          "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
-          "dev": true,
-          "requires": {}
-        },
-        "commander": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-          "dev": true
-        },
-        "rechoir": {
-          "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
-          "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
-          "dev": true,
-          "requires": {
-            "resolve": "^1.9.0"
-          }
-        },
-        "webpack-cli": {
-          "version": "4.10.0",
-          "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
-          "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
-          "dev": true,
-          "requires": {
-            "@discoveryjs/json-ext": "^0.5.0",
-            "@webpack-cli/configtest": "^1.2.0",
-            "@webpack-cli/info": "^1.5.0",
-            "@webpack-cli/serve": "^1.7.0",
-            "colorette": "^2.0.14",
-            "commander": "^7.0.0",
-            "cross-spawn": "^7.0.3",
-            "fastest-levenshtein": "^1.0.12",
-            "import-local": "^3.0.2",
-            "interpret": "^2.2.0",
-            "rechoir": "^0.7.0",
-            "webpack-merge": "^5.7.3"
-          }
-        }
-      }
-    },
    "nopt": {
      "version": "1.0.10",
      "requires": {
@@ -86403,6 +86427,11 @@
    "underscore": {
      "version": "1.13.6"
    },
+    "undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+    },
    "unfetch": {
      "version": "4.2.0",
      "dev": true
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
    "graph": "npx nx graph",
    "ci:prepare:editor": "ts-node ./scripts/ci-editor-prepare.ts",
    "ci:build:viewer": "lerna exec --scope @noodl/noodl-viewer-react -- npm run build",
-    "ci:build:editor": "lerna exec --scope noodl-editor -- npm run ci:build",
+    "ci:build:editor": "lerna exec --scope fluxscape-editor -- npm run ci:build",
    "build:editor": "ts-node ./scripts/build-editor.ts",
    "build:editor:_viewer": "ts-node ./scripts/noodl-editor/build-viewer.ts",
    "build:editor:_editor": "ts-node ./scripts/noodl-editor/build-editor.ts",
@@ -20,7 +20,7 @@
    "build:cloud-runtime": "lerna run build --scope @noodl/cloud-runtime --stream && lerna run build:pack --scope @noodl/cloud-runtime --stream",
    "start:storybook": "lerna exec --scope @noodl/noodl-core-ui -- npm run start",
    "start:viewer": "lerna run start --scope @noodl/noodl-viewer-react --stream",
-    "start:editor": "lerna run start --scope noodl-editor --stream",
+    "start:editor": "lerna run start --scope fluxscape-editor --stream",
    "dev": "ts-node ./scripts/start.ts",
    "start": "ts-node ./scripts/start.ts -- --build-viewer",
    "test:editor": "ts-node ./scripts/test-editor.ts",
@@ -47,4 +47,4 @@
    "npm": ">=6.0.0",
    "node": ">=16.0.0 <=18"
  }
-}
+}
--- a/packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.module.scss
+++ b/packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.module.scss
@@ -1,123 +1,128 @@
-.Root {
-  border: none;
-  padding: 0;
-  background: transparent;
-  box-sizing: border-box;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  &.has-backdrop {
-    background-color: var(--theme-color-bg-1-transparent);
-  }
-
-  &.is-locking-scroll {
-    background-color: transparent;
-  }
-
-  &:not(.has-backdrop):not(.is-locking-scroll) {
-    pointer-events: none;
-  }
-}
-
-.VisibleDialog {
-  filter: drop-shadow(0 4px 15px var(--theme-color-bg-1-transparent-2));
-  box-shadow: 0 0 10px -5px var(--theme-color-bg-1-transparent-2);
-  position: absolute;
-  width: var(--width);
-  pointer-events: all;
-
-  .Root.is-centered & {
-    top: 50%;
-    left: 50%;
-    animation: enter-centered var(--speed-quick) var(--easing-base) both;
-  }
-
-  .Root:not(.is-centered) &.is-visible {
-    &.is-variant-default {
-      animation: enter var(--speed-quick) var(--easing-base) both;
-    }
-
-    &.is-variant-select {
-      transform: translate(var(--offsetX), var(--offsetY));
-    }
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--background);
-    border-radius: 2px;
-    overflow: hidden;
-  }
-}
-
-.Arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  top: var(--arrow-top);
-  left: var(--arrow-left);
-  pointer-events: none;
-
-  &::after {
-    content: '';
-    display: block;
-    width: 11px;
-    height: 11px;
-    transform: translate(-50%, -50%) rotate(45deg);
-    background: var(--background);
-  }
-
-  &.is-contrast::after {
-    background: var(--backgroundContrast);
-  }
-}
-
-.Title {
-  background-color: var(--backgroundContrast);
-  padding: 12px;
-}
-
-.MeasuringContainer {
-  pointer-events: none;
-  height: 0;
-  overflow: visible;
-  opacity: 0;
-}
-
-.ChildContainer {
-  position: relative;
-  z-index: 1;
-}
-
-@keyframes enter {
-  from {
-    opacity: 0;
-    transform: translate(
-      calc(var(--animationStartOffsetX) + var(--offsetX)),
-      calc(var(--animationStartOffsetY) + var(--offsetY))
-    );
-  }
-  to {
-    opacity: 1;
-    transform: translate(var(--offsetX), var(--offsetY));
-  }
-}
-
-@keyframes enter-centered {
-  from {
-    opacity: 0;
-    transform: translate(-50%, calc(-50% + 16px));
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%);
-  }
-}
+.Root {
+  border: none;
+  padding: 0;
+  background: transparent;
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  &.is-hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &.has-backdrop {
+    background-color: var(--theme-color-bg-1-transparent);
+  }
+
+  &.is-locking-scroll {
+    background-color: transparent;
+  }
+
+  &:not(.has-backdrop):not(.is-locking-scroll) {
+    pointer-events: none;
+  }
+}
+
+.VisibleDialog {
+  filter: drop-shadow(0 4px 15px var(--theme-color-bg-1-transparent-2));
+  box-shadow: 0 0 10px -5px var(--theme-color-bg-1-transparent-2);
+  position: absolute;
+  width: var(--width);
+  pointer-events: all;
+
+  .Root.is-centered & {
+    top: 50%;
+    left: 50%;
+    animation: enter-centered var(--speed-quick) var(--easing-base) both;
+  }
+
+  .Root:not(.is-centered) &.is-visible {
+    &.is-variant-default {
+      animation: enter var(--speed-quick) var(--easing-base) both;
+    }
+
+    &.is-variant-select {
+      transform: translate(var(--offsetX), var(--offsetY));
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--background);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+}
+
+.Arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: var(--arrow-top);
+  left: var(--arrow-left);
+  pointer-events: none;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 11px;
+    height: 11px;
+    transform: translate(-50%, -50%) rotate(45deg);
+    background: var(--background);
+  }
+
+  &.is-contrast::after {
+    background: var(--backgroundContrast);
+  }
+}
+
+.Title {
+  background-color: var(--backgroundContrast);
+  padding: 12px;
+}
+
+.MeasuringContainer {
+  pointer-events: none;
+  height: 0;
+  overflow: visible;
+  opacity: 0;
+}
+
+.ChildContainer {
+  position: relative;
+  z-index: 1;
+}
+
+@keyframes enter {
+  from {
+    opacity: 0;
+    transform: translate(
+      calc(var(--animationStartOffsetX) + var(--offsetX)),
+      calc(var(--animationStartOffsetY) + var(--offsetY))
+    );
+  }
+  to {
+    opacity: 1;
+    transform: translate(var(--offsetX), var(--offsetY));
+  }
+}
+
+@keyframes enter-centered {
+  from {
+    opacity: 0;
+    transform: translate(-50%, calc(-50% + 16px));
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
--- a/packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.tsx
+++ b/packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.tsx
@@ -42,6 +42,7 @@ export interface BaseDialogProps extends UnsafeStyleProps {
  isVisible?: boolean;
  hasBackdrop?: boolean;
  hasArrow?: boolean;
+  alwaysMounted?: boolean;

  children?: Slot;

@@ -69,6 +70,7 @@ export function CoreBaseDialog({
  isVisible,
  hasBackdrop,
  hasArrow,
+  alwaysMounted,

  children,

@@ -261,7 +263,7 @@ export function CoreBaseDialog({
    }
  }, [background]);

-  if (!isVisible) return null;
+  if (!isVisible && !alwaysMounted) return null;

  return (
    <div
@@ -270,6 +272,7 @@ export function CoreBaseDialog({
        hasBackdrop && css['has-backdrop'],
        isLockingScroll && css['is-locking-scroll'],
        typeof triggerRef === 'undefined' && css['is-centered'],
+        !isVisible && css['is-hidden'],
        css[variant]
      )}
      onClick={onClose}
--- a/packages/noodl-editor/package.json
+++ b/packages/noodl-editor/package.json
@@ -1,10 +1,10 @@
 {
-  "name": "noodl-editor",
+  "name": "fluxscape-editor",
  "productName": "Fluxscape",
  "description": "Node-Based App Builder for Scalability & Rapid Development, a fork of Noodl",
  "author": "Fluxscape <contact@fluxscape.io>",
  "homepage": "https://fluxscape.io",
-  "version": "1.0.0",
+  "version": "1.1.0",
  "main": "src/main/main.js",
  "scripts": {
    "build": "npx ts-node -P ./tsconfig.build.json ./scripts/build.ts",
@@ -58,7 +58,7 @@
    ]
  },
  "dependencies": {
-    "@electron/remote": "^2.1.1",
+    "@electron/remote": "^2.1.2",
    "@jaames/iro": "^5.5.2",
    "@microsoft/fetch-event-source": "^2.0.1",
    "@noodl/git": "file:../noodl-git",
@@ -114,7 +114,7 @@
    "babel-loader": "^8.2.4",
    "concurrently": "^7.4.0",
    "css-loader": "^6.7.1",
-    "electron": "28.1.4",
+    "electron": "31.3.1",
    "electron-builder": "^24.9.1",
    "file-loader": "^6.2.0",
    "html-loader": "^3.1.0",
@@ -141,4 +141,4 @@
  "optionalDependencies": {
    "dmg-license": "^1.0.11"
  }
-}
+}
--- a/packages/noodl-editor/src/assets/images/getting-started-docs.png
+++ b/packages/noodl-editor/src/assets/images/getting-started-docs.png
--- a/packages/noodl-editor/src/assets/images/getting-started-vid-tuts.png
+++ b/packages/noodl-editor/src/assets/images/getting-started-vid-tuts.png
--- a/packages/noodl-editor/src/assets/images/ic_back.png
+++ b/packages/noodl-editor/src/assets/images/ic_back.png
--- a/packages/noodl-editor/src/assets/images/ic_logo.png
+++ b/packages/noodl-editor/src/assets/images/ic_logo.png
--- a/packages/noodl-editor/src/assets/images/import-icon.png
+++ b/packages/noodl-editor/src/assets/images/import-icon.png
--- a/packages/noodl-editor/src/assets/images/outline-cloud_done-24px.svg
+++ b/packages/noodl-editor/src/assets/images/outline-cloud_done-24px.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3zm-9-3.82l-2.09-2.09L6.5 13.5 10 17l6.01-6.01-1.41-1.41z"/></svg>
--- a/packages/noodl-editor/src/assets/images/personal.png
+++ b/packages/noodl-editor/src/assets/images/personal.png
--- a/packages/noodl-editor/src/assets/images/sharp-add-24px.svg
+++ b/packages/noodl-editor/src/assets/images/sharp-add-24px.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
--- a/packages/noodl-editor/src/assets/images/sharp-input-24px.svg
+++ b/packages/noodl-editor/src/assets/images/sharp-input-24px.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="M0 0h24v24H0V0z"/><path opacity=".87" d="M0 0h24v24H0V0z"/></g><path d="M21 3.01H3c-1.1 0-2 .9-2 2V9h2V4.99h18v14.03H3V15H1v4.01c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98v-14c0-1.11-.9-2-2-2zM11 16l4-4-4-4v3H1v2h10v3zM23 3.01H1V9h2V4.99h18v14.03H3V15H1v5.99h22V3.01zM11 16l4-4-4-4v3H1v2h10v3z"/></svg>
--- a/packages/noodl-editor/src/assets/images/sharp-library_books-24px.svg
+++ b/packages/noodl-editor/src/assets/images/sharp-library_books-24px.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M4 6H2v16h16v-2H4V6zm18-4H6v16h16V2zm-3 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg>
--- a/packages/noodl-editor/src/assets/images/sharp-list-24px.svg
+++ b/packages/noodl-editor/src/assets/images/sharp-list-24px.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="M0 0h24v24H0V0z"/><path opacity=".87" d="M0 0h24v24H0V0z"/></g><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>
--- a/packages/noodl-editor/src/assets/images/sharp-settings-24px.svg
+++ b/packages/noodl-editor/src/assets/images/sharp-settings-24px.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>
--- a/packages/noodl-editor/src/assets/images/start.png
+++ b/packages/noodl-editor/src/assets/images/start.png
--- a/packages/noodl-editor/src/assets/images/workspace.png
+++ b/packages/noodl-editor/src/assets/images/workspace.png
--- a/packages/noodl-editor/src/editor/src/contexts/NodeReferencesContext/NodeReferencesContext.tsx
+++ b/packages/noodl-editor/src/editor/src/contexts/NodeReferencesContext/NodeReferencesContext.tsx
@@ -0,0 +1,142 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+import { type ComponentModel } from '@noodl-models/componentmodel';
+import { type NodeGraphNode } from '@noodl-models/nodegraphmodel';
+import { type NodeLibraryNodeType } from '@noodl-models/nodelibrary';
+import { type Slot } from '@noodl-core-ui/types/global';
+import { ProjectModel } from '@noodl-models/projectmodel';
+import { EventDispatcher } from '../../../../shared/utils/EventDispatcher';
+
+export type NodeReference = {
+  type: NodeLibraryNodeType | undefined;
+  displayName: string;
+  referenaces: {
+    displayName: string;
+    node?: NodeGraphNode;
+    component: ComponentModel;
+  }[];
+};
+
+export interface NodeReferencesContext {
+  nodeReferences: NodeReference[];
+}
+
+const NodeReferencesContext = createContext<NodeReferencesContext>({
+  nodeReferences: [],
+});
+
+// Since all the editor code is not written in React we need a way to be able to
+// access this information outside of React too.
+let HACK_nodeReferences: NodeReference[] = [];
+export function HACK_findNodeReference(componentName: string): NodeReference | undefined {
+  return HACK_nodeReferences.find(x => x.type?.fullName === componentName);
+}
+
+
+export interface NodeReferencesContextProps {
+  children: Slot;
+}
+
+export function NodeReferencesContextProvider({ children }: NodeReferencesContextProps) {
+  const [group] = useState({});
+  const [nodeReferences, setNodeReferences] = useState<NodeReference[]>([]);
+
+  useEffect(() => {
+    function updateIndex() {
+      const types: { [key: string]: NodeReference['type'] } = {};
+      const references = new Map<string, NodeReference['referenaces']>();
+
+      function handleComponent(component: ComponentModel) {
+        component.forEachNode((node: NodeGraphNode) => {
+          const name = node.type.name;
+
+          // Add the reference
+          references.set(name, [
+            ...(references.get(name) || []),
+            {
+              displayName: component.displayName || component.name,
+              node,
+              component
+            }
+          ]);
+
+          // Repeater
+          if (name === 'For Each' && node.parameters.template) {
+            const templateComponent = ProjectModel.instance.getComponentWithName(node.parameters.template);
+
+            if (templateComponent) {
+              references.set(templateComponent.fullName, [
+                ...(references.get(templateComponent.fullName) || []),
+                {
+                  displayName: component.displayName || component.name,
+                  node,
+                  component
+                }
+              ]);
+
+              handleComponent(templateComponent);
+            }
+          }
+
+          // Add some metadata for this node if we dont have it yet.
+          if (!types[name]) {
+            types[name] = node.type;
+          }
+        });
+      }
+
+      // Loop all the nodes in the project
+      ProjectModel.instance.forEachComponent(handleComponent);
+
+      // Combine the result to look a little better.
+      const results: NodeReference[] = Array.from(references.keys())
+        .map((key) => ({
+          type: types[key],
+          displayName: types[key]?.displayName || key,
+          referenaces: references.get(key)
+        }))
+        .sort((a, b) => b.referenaces.length - a.referenaces.length);
+
+      HACK_nodeReferences = results;
+      setNodeReferences(results);
+    }
+
+    updateIndex();
+
+    EventDispatcher.instance.on(
+      [
+        'Model.nodeAdded',
+        'Model.nodeRemoved',
+        'Model.componentAdded',
+        'Model.componentRemoved',
+        'Model.componentRenamed'
+      ],
+      updateIndex,
+      group
+    );
+
+    return function () {
+      EventDispatcher.instance.off(group);
+    };
+  }, []);
+
+  return (
+    <NodeReferencesContext.Provider
+      value={{
+        nodeReferences,
+      }}
+    >
+      {children}
+    </NodeReferencesContext.Provider>
+  );
+}
+
+export function useNodeReferencesContext() {
+  const context = useContext(NodeReferencesContext);
+
+  if (context === undefined) {
+    throw new Error('useNodeReferencesContext must be a child of NodeReferencesContextProvider');
+  }
+
+  return context;
+}
--- a/packages/noodl-editor/src/editor/src/contexts/NodeReferencesContext/index.ts
+++ b/packages/noodl-editor/src/editor/src/contexts/NodeReferencesContext/index.ts
@@ -0,0 +1 @@
+export * from './NodeReferencesContext';
--- a/packages/noodl-editor/src/editor/src/contexts/PluginContext/commands/upload-aws-s3.ts
+++ b/packages/noodl-editor/src/editor/src/contexts/PluginContext/commands/upload-aws-s3.ts
@@ -48,7 +48,7 @@ export async function execute(command: Command, event: MessageEvent) {

  // Deploy to temp folder
  await compilation.deployToFolder(tempDir, {
-    environment: command.cloudService ? new Environment("", command.cloudService) : undefined
+    environment: command.cloudService ? new Environment(command.cloudService) : undefined
  });

  // Upload to S3
--- a/packages/noodl-editor/src/editor/src/models/CloudServices/CloudService.ts
+++ b/packages/noodl-editor/src/editor/src/models/CloudServices/CloudService.ts
@@ -1,9 +1,9 @@
+import { Environment, ExternalCloudService } from '@noodl-models/CloudServices/ExternalCloudService';
 import {
  CloudServiceEvent,
  CloudServiceEvents,
  CreateEnvironment,
  CreateEnvironmentRequest,
-  Environment,
  ICloudBackendService,
  ICloudService,
  UpdateEnvironmentRequest
@@ -12,9 +12,6 @@ import { ProjectModel } from '@noodl-models/projectmodel';
 import { getCloudServices } from '@noodl-models/projectmodel.editor';
 import { Model } from '@noodl-utils/model';

-import { GlobalCloudService } from './providers/GlobalCloudService';
-import { ProjectCloudService } from './providers/ProjectCloudService';
-
 export type CloudQueueItem = {
  frontendId: string;
  environmentId: string;
@@ -23,9 +20,7 @@ export type CloudQueueItem = {
 class CloudBackendService implements ICloudBackendService {
  private _isLoading = false;
  private _collection?: Environment[];
-
-  private _globalProvider = new GlobalCloudService();
-  private _projectProvider = new ProjectCloudService();
+  private _localExternal = new ExternalCloudService();

  get isLoading(): boolean {
    return this._isLoading;
@@ -37,14 +32,12 @@ class CloudBackendService implements ICloudBackendService {

  constructor(private readonly service: CloudService) {}

-  async fetch(project: ProjectModel): Promise<Environment[]> {
+  async fetch(): Promise<Environment[]> {
    this._isLoading = true;
    try {
-      const projectResults = await this._projectProvider.list(project);
-      this._collection = projectResults.map((x) => new Environment("project", x));
-
-      const globalResults = await this._globalProvider.list(project);
-      this._collection = this._collection.concat(globalResults.map((x) => new Environment("global", x)));
+      // Fetch environments from local machine
+      const localEnvironments = await this._localExternal.list();
+      this._collection = localEnvironments.map((x) => new Environment(x));
    } finally {
      this._isLoading = false;
      this.service.notifyListeners(CloudServiceEvent.BackendUpdated);
@@ -55,7 +48,7 @@ class CloudBackendService implements ICloudBackendService {
  async fromProject(project: ProjectModel): Promise<Environment> {
    const activeCloudServices = getCloudServices(project);
    if (!this._collection) {
-      await this.fetch(project);
+      await this.fetch();
    }

    return this.items.find((b) => {
@@ -63,16 +56,16 @@ class CloudBackendService implements ICloudBackendService {
    });
  }

-  async create(project: ProjectModel, options: CreateEnvironmentRequest): Promise<CreateEnvironment> {
-    return await this._projectProvider.create(project, options);
+  async create(options: CreateEnvironmentRequest): Promise<CreateEnvironment> {
+    return await this._localExternal.create(options);
  }

-  async update(project: ProjectModel, options: UpdateEnvironmentRequest): Promise<boolean> {
-    return await this._projectProvider.update(project, options);
+  async update(options: UpdateEnvironmentRequest): Promise<boolean> {
+    return await this._localExternal.update(options);
  }

-  async delete(project: ProjectModel, id: string): Promise<boolean> {
-    return await this._projectProvider.delete(project, id);
+  async delete(id: string): Promise<boolean> {
+    return await this._localExternal.delete(id);
  }
 }

@@ -102,11 +95,15 @@ export class CloudService extends Model<CloudServiceEvent, CloudServiceEvents> i
   */
  public async prefetch() {
    this.reset();
-    await this.backend.fetch(ProjectModel.instance);
+    await this.fetch();
+  }
+
+  public async fetch() {
+    await this.backend.fetch();
  }

  public async getActiveEnvironment(project: ProjectModel): Promise<Environment> {
-    await this.backend.fetch(project);
+    await this.backend.fetch();
    return this.backend.fromProject(project);
  }
 }
--- a/packages/noodl-editor/src/editor/src/models/CloudServices/providers/GlobalCloudService.ts
+++ b/packages/noodl-editor/src/editor/src/models/CloudServices/providers/GlobalCloudService.ts
@@ -1,21 +1,25 @@
 import { JSONStorage } from '@noodl/platform';

-import {
-  CreateEnvironment,
-  CreateEnvironmentRequest,
-  EnvironmentDataFormat,
-  ICloudServiceProvider,
-  UpdateEnvironmentRequest
-} from '@noodl-models/CloudServices';
-import { ProjectModel } from '@noodl-models/projectmodel';
+import { CreateEnvironment, CreateEnvironmentRequest, UpdateEnvironmentRequest } from '@noodl-models/CloudServices';

-export class GlobalCloudService implements ICloudServiceProvider {
-  async list(_project: ProjectModel): Promise<EnvironmentDataFormat[]> {
+/** The data format is separated from our internal model. */
+export type EnvironmentDataFormat = {
+  enabled: boolean;
+  id: string;
+  name: string;
+  description: string;
+  masterKey: string;
+  appId: string;
+  endpoint: string;
+};
+
+export class ExternalCloudService {
+  async list(): Promise<EnvironmentDataFormat[]> {
    const local = await JSONStorage.get('externalBrokers');
    return local.brokers || [];
  }

-  async create(_project: ProjectModel, options: CreateEnvironmentRequest): Promise<CreateEnvironment> {
+  async create(options: CreateEnvironmentRequest): Promise<CreateEnvironment> {
    const id = `${options.url}-${options.appId}`;

    const newBroker: EnvironmentDataFormat = {
@@ -40,7 +44,7 @@ export class GlobalCloudService implements ICloudServiceProvider {
    };
  }

-  async update(_project: ProjectModel, options: UpdateEnvironmentRequest): Promise<boolean> {
+  async update(options: UpdateEnvironmentRequest): Promise<boolean> {
    const local = await JSONStorage.get('externalBrokers');
    const brokers: EnvironmentDataFormat[] = local.brokers || [];

@@ -59,7 +63,7 @@ export class GlobalCloudService implements ICloudServiceProvider {
    return true;
  }

-  async delete(_project: ProjectModel, id: string): Promise<boolean> {
+  async delete(id: string): Promise<boolean> {
    const local = await JSONStorage.get('externalBrokers');
    const brokers: EnvironmentDataFormat[] = local.brokers || [];

@@ -75,3 +79,25 @@ export class GlobalCloudService implements ICloudServiceProvider {
    return true;
  }
 }
+
+export class Environment {
+  id: string;
+  name: string;
+  description: string;
+  createdAt: string;
+  masterKeyUpdatedAt: string;
+  masterKey: string;
+  appId: string;
+  url: string;
+
+  constructor(item: EnvironmentDataFormat) {
+    this.id = item.id;
+    this.name = item.name;
+    this.description = item.description;
+    this.createdAt = '';
+    this.masterKeyUpdatedAt = '';
+    this.masterKey = item.masterKey;
+    this.appId = item.appId;
+    this.url = item.endpoint;
+  }
+}
--- a/packages/noodl-editor/src/editor/src/models/CloudServices/index.ts
+++ b/packages/noodl-editor/src/editor/src/models/CloudServices/index.ts
@@ -1,2 +1,3 @@
 export * from './CloudService';
 export * from './type';
+export * from './ExternalCloudService';
--- a/packages/noodl-editor/src/editor/src/models/CloudServices/providers/ProjectCloudService.ts
+++ b/packages/noodl-editor/src/editor/src/models/CloudServices/providers/ProjectCloudService.ts
@@ -1,101 +0,0 @@
-import { filesystem } from '@noodl/platform';
-
-import {
-  CreateEnvironment,
-  CreateEnvironmentRequest,
-  EnvironmentDataFormat,
-  ICloudServiceProvider,
-  UpdateEnvironmentRequest
-} from '@noodl-models/CloudServices';
-import { ProjectModel } from '@noodl-models/projectmodel';
-
-/**
- * Store the Cloud Service relative to the project folder.
- */
-export class ProjectCloudService implements ICloudServiceProvider {
-  private async load(project: ProjectModel) {
-    const dirpath = filesystem.resolve(project._retainedProjectDirectory, ".noodl");
-    const filepath = filesystem.resolve(dirpath, "cloudservices.json");
-    if (!filesystem.exists(filepath)) {
-      return []
-    }
-
-    // TODO: Validate file content
-    return filesystem.readJson(filepath);
-  }
-
-  private async save(project: ProjectModel, items: EnvironmentDataFormat[]) {
-    const dirpath = filesystem.resolve(project._retainedProjectDirectory, ".noodl");
-    const filepath = filesystem.resolve(dirpath, "cloudservices.json");
-    if (!filesystem.exists(filepath)) {
-      await filesystem.makeDirectory(dirpath);
-    }
-
-    await filesystem.writeJson(filepath, items);
-  }
-  
-  async list(project: ProjectModel): Promise<EnvironmentDataFormat[]> {
-    if (!project || !project._retainedProjectDirectory) {
-      return []
-    }
-
-    return await this.load(project);
-  }
-
-  async create(project: ProjectModel, options: CreateEnvironmentRequest): Promise<CreateEnvironment> {
-    const id = `${options.url}-${options.appId}`;
-
-    const newBroker: EnvironmentDataFormat = {
-      enabled: true,
-      id,
-      name: options.name,
-      description: options.description,
-      masterKey: options.masterKey,
-      appId: options.appId,
-      endpoint: options.url
-    };
-
-    const current = await this.load(project);
-    await this.save(project, [...current, newBroker]);
-
-    return {
-      id: newBroker.id,
-      appId: newBroker.appId,
-      url: newBroker.endpoint,
-      masterKey: newBroker.masterKey
-    };
-  }
-
-  async update(project: ProjectModel, options: UpdateEnvironmentRequest): Promise<boolean> {
-    const current = await this.load(project);
-
-    // Find and update
-    const broker = current.find((x) => x.id === options.id);
-    if (!broker) return false;
-
-    if (typeof options.name !== undefined) broker.name = options.name;
-    if (typeof options.description !== undefined) broker.description = options.description;
-    if (typeof options.appId !== undefined) broker.appId = options.appId;
-    if (typeof options.masterKey !== undefined) broker.masterKey = options.masterKey;
-    if (typeof options.url !== undefined) broker.endpoint = options.url;
-
-    await this.save(project, current);
-
-    return true;
-  }
-
-  async delete(project: ProjectModel, id: string): Promise<boolean> {
-    const current = await this.load(project);
-
-    // Find the environment
-    const found = current.find((b) => b.id === id);
-    if (found) {
-      // Delete the environment
-      current.splice(current.indexOf(found), 1);
-    }
-
-    // Save the list
-    await this.save(project, current);
-    return true;
-  }
-}
--- a/packages/noodl-editor/src/editor/src/models/CloudServices/type.ts
+++ b/packages/noodl-editor/src/editor/src/models/CloudServices/type.ts
@@ -1,3 +1,4 @@
+import { Environment } from '@noodl-models/CloudServices';
 import { ProjectModel } from '@noodl-models/projectmodel';
 import { IModel } from '@noodl-utils/model';

@@ -29,11 +30,11 @@ export interface ICloudBackendService {
  get isLoading(): boolean;
  get items(): Environment[];

-  fetch(project: ProjectModel): Promise<Environment[]>;
+  fetch(): Promise<Environment[]>;
  fromProject(project: ProjectModel): Promise<Environment> | undefined;
-  create(project: ProjectModel, options: CreateEnvironmentRequest): Promise<CreateEnvironment>;
-  update(project: ProjectModel, options: UpdateEnvironmentRequest): Promise<boolean>;
-  delete(project: ProjectModel, id: string): Promise<boolean>;
+  create(options: CreateEnvironmentRequest): Promise<CreateEnvironment>;
+  update(options: UpdateEnvironmentRequest): Promise<boolean>;
+  delete(id: string): Promise<boolean>;
 }

 export enum CloudServiceEvent {
@@ -54,54 +55,3 @@ export interface ICloudService extends IModel<CloudServiceEvent, CloudServiceEve

  get backend(): ICloudBackendService;
 }
-
-/** The data format is separated from our internal model. */
-export type EnvironmentDataFormat = {
-  enabled: boolean;
-  id: string;
-  name: string;
-  description: string;
-  masterKey: string;
-  appId: string;
-  endpoint: string;
-};
-
-export class Environment {
-  id: string;
-  name: string;
-  description: string;
-  createdAt: string;
-  masterKeyUpdatedAt: string;
-  masterKey: string;
-  appId: string;
-  url: string;
-
-  provider: string;
-
-  get typeDisplayName() {
-    switch (this.provider) {
-      case "project": return "Self hosted";
-      default: return "Global Self hosted"
-    }
-  }
-
-  constructor(provider: string, item: EnvironmentDataFormat) {
-    this.provider = provider;
-
-    this.id = item.id;
-    this.name = item.name;
-    this.description = item.description;
-    this.createdAt = '';
-    this.masterKeyUpdatedAt = '';
-    this.masterKey = item.masterKey;
-    this.appId = item.appId;
-    this.url = item.endpoint;
-  }
-}
-
-export interface ICloudServiceProvider {
-  list(project: ProjectModel | undefined): Promise<EnvironmentDataFormat[]>;
-  create(project: ProjectModel | undefined, options: CreateEnvironmentRequest): Promise<CreateEnvironment>;
-  update(project: ProjectModel | undefined, options: UpdateEnvironmentRequest): Promise<boolean>;
-  delete(project: ProjectModel | undefined, id: string): Promise<boolean>;
-}
--- a/packages/noodl-editor/src/editor/src/models/NodeTypeAdapters/CloudFunctionAdapter.ts
+++ b/packages/noodl-editor/src/editor/src/models/NodeTypeAdapters/CloudFunctionAdapter.ts
@@ -57,10 +57,13 @@ export class CloudFunctionAdapter extends NodeTypeAdapter {

    // Collect all cloud function components
    const functionRequestNodes = ProjectModel.instance.getNodesWithType('noodl.cloud.request');
-    const functions = functionRequestNodes.map((r) => {
-      const component = r.owner.owner;
-      return component.fullName;
-    });
+    const functions = functionRequestNodes
+      .map((r) => {
+        const component = r.owner.owner;
+        return component.fullName;
+      })
+      // Remove all the Cloud Trigger functions
+      .filter((x) => !x.startsWith('/#__cloud__/__noodl_cloud_triggers__'));

    ports.push({
      plug: 'input',
--- a/packages/noodl-editor/src/editor/src/pages/EditorPage/EditorPage.tsx
+++ b/packages/noodl-editor/src/editor/src/pages/EditorPage/EditorPage.tsx
@@ -1,4 +1,6 @@
 import { NodeGraphContextProvider } from '@noodl-contexts/NodeGraphContext/NodeGraphContext';
+import { NodeReferencesContextProvider } from '@noodl-contexts/NodeReferencesContext';
+import { PluginContextProvider } from '@noodl-contexts/PluginContext';
 import { ProjectDesignTokenContextProvider } from '@noodl-contexts/ProjectDesignTokenContext';
 import { useKeyboardCommands } from '@noodl-hooks/useKeyboardCommands';
 import { useModel } from '@noodl-hooks/useModel';
@@ -6,6 +8,7 @@ import { ipcRenderer } from 'electron';
 import React, { useEffect, useState } from 'react';
 import { platform } from '@noodl/platform';

+import { Keybindings } from '@noodl-constants/Keybindings';
 import { App } from '@noodl-models/app';
 import { AppRegistry } from '@noodl-models/app_registry';
 import { CloudService } from '@noodl-models/CloudServices';
@@ -43,7 +46,6 @@ import { BaseWindow } from '../../views/windows/BaseWindow';
 import { whatsnewRender } from '../../whats-new';
 import { IRouteProps } from '../AppRoute';
 import { useSetupSettings } from './useSetupSettings';
-import { PluginContextProvider } from '@noodl-contexts/PluginContext';

 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const ImportOverwritePopupTemplate = require('../../templates/importoverwritepopup.html');
@@ -155,7 +157,7 @@ export function EditorPage({ route }: EditorPageProps) {
  useKeyboardCommands(() => [
    {
      handler: () => SidebarModel.instance.switch('search'),
-      keybinding: KeyMod.CtrlCmd | KeyCode.KEY_F
+      keybinding: Keybindings.SEARCH.hash
    },
    {
      handler: () => EventDispatcher.instance.emit('viewer-open-devtools'),
@@ -223,28 +225,30 @@ export function EditorPage({ route }: EditorPageProps) {

  return (
    <NodeGraphContextProvider>
-      <ProjectDesignTokenContextProvider>
-        <PluginContextProvider>
-          <BaseWindow>
-            {isLoading ? (
-              <ActivityIndicator />
-            ) : (
-              <>
-                <FrameDivider
-                  first={<SidePanel />}
-                  second={<ErrorBoundary>{Boolean(Document) && <Document />}</ErrorBoundary>}
-                  sizeMin={200}
-                  size={frameDividerSize}
-                  horizontal
-                  onSizeChanged={setFrameDividerSize}
-                />
+      <NodeReferencesContextProvider>
+        <ProjectDesignTokenContextProvider>
+          <PluginContextProvider>
+            <BaseWindow>
+              {isLoading ? (
+                <ActivityIndicator />
+              ) : (
+                <>
+                  <FrameDivider
+                    first={<SidePanel />}
+                    second={<ErrorBoundary>{Boolean(Document) && <Document />}</ErrorBoundary>}
+                    sizeMin={200}
+                    size={frameDividerSize}
+                    horizontal
+                    onSizeChanged={setFrameDividerSize}
+                  />

-                {Boolean(lesson) && <Frame instance={lesson} isContentSize isFitWidth />}
-              </>
-            )}
-          </BaseWindow>
-        </PluginContextProvider>
-      </ProjectDesignTokenContextProvider>
+                  {Boolean(lesson) && <Frame instance={lesson} isContentSize isFitWidth />}
+                </>
+              )}
+            </BaseWindow>
+          </PluginContextProvider>
+        </ProjectDesignTokenContextProvider>
+      </NodeReferencesContextProvider>
    </NodeGraphContextProvider>
  );
 }
--- a/packages/noodl-editor/src/editor/src/utils/LocalProjectsModel.ts
+++ b/packages/noodl-editor/src/editor/src/utils/LocalProjectsModel.ts
@@ -16,6 +16,7 @@ import { projectFromDirectory, unzipIntoDirectory } from '../models/projectmodel
 import FileSystem from './filesystem';
 import { tracker } from './tracker';
 import { guid } from './utils';
+import { getTopLevelWorkingDirectory } from '@noodl/git/src/core/open';

 export interface ProjectItem {
  id: string;
@@ -267,12 +268,15 @@ export class LocalProjectsModel extends Model {
    });
  }

-  isGitProject(project: ProjectModel): boolean {
-    // TODO: check if there's is git in any parent folder too
-
-    // Check if the git folder exists.
-    const gitPath = filesystem.join(project._retainedProjectDirectory, '.git');
-    return filesystem.exists(gitPath);
+  /**
+   * Check if this project is in a git repository.
+   *
+   * @param project 
+   * @returns 
+   */
+  async isGitProject(project: ProjectModel): Promise<boolean> {
+    const gitPath = await getTopLevelWorkingDirectory(project._retainedProjectDirectory);
+    return gitPath !== null;
  }

  setCurrentGlobalGitAuth(projectId: string) {
--- a/packages/noodl-editor/src/editor/src/utils/cloudformation.ts
+++ b/packages/noodl-editor/src/editor/src/utils/cloudformation.ts
@@ -1,5 +1,4 @@
 import { CloudService } from '@noodl-models/CloudServices';
-import { ProjectModel } from '@noodl-models/projectmodel';
 import SchemaModel from '@noodl-models/schemamodel';

 class FormCollection {
@@ -194,7 +193,7 @@ export default class CloudFormation {
  }) {
    // Create new cloud services if needed
    if (options.cloudServices.id === undefined) {
-      CloudService.instance.backend.fetch(ProjectModel.instance).then((collection) => {
+      CloudService.instance.backend.fetch().then((collection) => {
        // TODO(OS): Cloud formation Cloud Service
        // // Make sure we have a unique name for the cloud services
        // const orgName = options.cloudServices.name;
--- a/packages/noodl-editor/src/editor/src/utils/compilation/build/deploy-index.ts
+++ b/packages/noodl-editor/src/editor/src/utils/compilation/build/deploy-index.ts
@@ -67,6 +67,14 @@ async function _writeFileToFolder({
  runtimeType
 }: WriteFileToFolderArgs) {
  const fullPath = filesystem.join(getExternalFolderPath(), runtimeType, url);
+
+  if (!filesystem.exists(fullPath)) {
+    // TODO: Save this warning somewhere, usually, this is not an issue though.
+    // This occurred because building in dev mode does not create the source map
+    // files which it expects to copy over.
+    return;
+  }
+
  let content = await filesystem.readFile(fullPath);
  let filename = url;

--- a/packages/noodl-editor/src/editor/src/utils/projectmerger.diff.ts
+++ b/packages/noodl-editor/src/editor/src/utils/projectmerger.diff.ts
@@ -11,6 +11,14 @@ export interface ArrayDiff<T> {
  changed: T[];
  unchanged: T[];
 }
+export function createEmptyArrayDiff<T>(): ArrayDiff<T> {
+  return {
+    deleted: [],
+    created: [],
+    changed: [],
+    unchanged: [],
+  }
+}

 export interface ProjectDiffItem {
  graph: TSFixme;
--- a/packages/noodl-editor/src/editor/src/utils/schemahandler.ts
+++ b/packages/noodl-editor/src/editor/src/utils/schemahandler.ts
@@ -13,6 +13,7 @@ export default class SchemaHandler {
  public dbCollections: TSFixme[];
  public systemCollections: TSFixme[];
  public configSchema: TSFixme;
+  public parseServerVersion: string;

  constructor() {
    EventDispatcher.instance.on(
@@ -41,7 +42,7 @@ export default class SchemaHandler {
        return; // No project broker
      }

-      CloudService.instance.backend.fetch(ProjectModel.instance).then((collection) => {
+      CloudService.instance.backend.fetch().then((collection) => {
        // Find by the Url / Endpoint and app id
        let environment = collection.find((b) => {
          return b.url === activeBroker.endpoint && b.appId === activeBroker.appId;
@@ -119,6 +120,20 @@ export default class SchemaHandler {
            console.log(e);
          }
        });
+
+        // Get Parse Server Version & Supported features
+        fetch(environment.url + '/serverInfo', {
+          method: 'POST',
+          body: JSON.stringify({
+            "_method": "GET",
+            "_ApplicationId": environment.appId,
+            "_MasterKey": environment.masterKey,
+          })
+        })
+          .then((response) => response.json())
+          .then((json) => {
+            this.parseServerVersion = json.parseServerVersion;
+          });
      });
    });
  }
@@ -129,10 +144,20 @@ export default class SchemaHandler {
        ProjectModel.instance.setMetaData('dbCollections', this.dbCollections);
        ProjectModel.instance.setMetaData('systemCollections', this.systemCollections);
        ProjectModel.instance.setMetaData('dbConfigSchema', this.configSchema);
+
+        const versionNumbers = this.parseServerVersion?.split(".")
+        if (versionNumbers && versionNumbers.length > 0) {
+          // Let's only save the major version number,
+          // since this will be used to determine which verison of the API to use.
+          ProjectModel.instance.setMetaData('dbVersionMajor', versionNumbers[0]);
+        } else {
+          ProjectModel.instance.setMetaData('dbVersionMajor', undefined);
+        }
      } else {
        ProjectModel.instance.setMetaData('dbCollections', undefined);
        ProjectModel.instance.setMetaData('systemCollections', undefined);
        ProjectModel.instance.setMetaData('dbConfigSchema', undefined);
+        ProjectModel.instance.setMetaData('dbVersionMajor', undefined);
      }
    }
  }
--- a/packages/noodl-editor/src/editor/src/views/DeployPopup/DeployPopup.tsx
+++ b/packages/noodl-editor/src/editor/src/views/DeployPopup/DeployPopup.tsx
@@ -1,5 +1,6 @@
-import { usePluginContext } from '@noodl-contexts/PluginContext';
-import React, { RefObject, useEffect, useRef } from 'react';
+import React, { RefObject } from 'react';
+
+import { ProjectModel } from '@noodl-models/projectmodel';

 import { ActivityIndicator } from '@noodl-core-ui/components/common/ActivityIndicator';
 import { BaseDialog } from '@noodl-core-ui/components/layout/BaseDialog';
@@ -54,6 +55,7 @@ export function DeployPopup(props: DeployPopupProps) {
        onClose={props.onClose}
        hasArrow
        isLockingScroll
+        alwaysMounted
      >
        <DeployPopupChild />
      </BaseDialog>
@@ -62,6 +64,19 @@ export function DeployPopup(props: DeployPopupProps) {
 }

 function FluxscapeDeployTab() {
-  // Preview URL:  'http://192.168.0.33:8574/'
-  return <iframe src="https://portal.fluxscape.io" style={{ width: "100%", height: "50vh", borderStyle: "none" }} />;
+  const params = {};
+
+  const projectId = ProjectModel.instance.id;
+  if (projectId) {
+    params['projectId'] = projectId;
+  }
+
+  const urlParams = new URLSearchParams(params);
+
+  return (
+    <iframe
+      src={`https://portal.fluxscape.io/?${urlParams.toString()}`}
+      style={{ width: '100%', height: '50vh', borderStyle: 'none' }}
+    />
+  );
 }
--- a/packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceCard/CloudServiceCard.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceCard/CloudServiceCard.tsx
@@ -87,7 +87,7 @@ export function CloudServiceCard({
        <div className={css['MetaBar']}>
          <div className={classNames([css['TypeDisplay'], isEditorEnvironment && css['is-editor-environment']])}>
            <Icon icon={IconName.CloudCheck} size={IconSize.Small} UNSAFE_style={{ marginRight: 4 }} />
-            {environment.typeDisplayName + ' '}
+            {'Self hosted '}
            {errorMessage && <span className={css['ArchivedDisplay']}>({errorMessage})</span>}
            {isEditorEnvironment && <span className={css['UsedInEditorDisplay']}>(Used in editor)</span>}
          </div>
--- a/packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceCardItem/CloudServiceCardItem.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceCardItem/CloudServiceCardItem.tsx
@@ -5,7 +5,6 @@ import { CloudService, Environment } from '@noodl-models/CloudServices';
 import { ToastType } from '../../../ToastLayer/components/ToastCard';
 import { CloudServiceCard } from '../CloudServiceCard';
 import { useCloudServiceContext } from '../CloudServicePanel.context';
-import { ProjectModel } from '@noodl-models/projectmodel';

 export interface CloudServiceCardItemProps {
  environment: Environment;
@@ -21,7 +20,7 @@ export function CloudServiceCardItem({ environment, deleteEnvironment }: CloudSe
  async function onDelete() {
    await deleteEnvironment();
    await runActivity('Deleting cloud service...', async () => {
-      const response: boolean = await CloudService.instance.backend.delete(ProjectModel.instance, environment.id);
+      const response: boolean = await CloudService.instance.backend.delete(environment.id);
      return {
        type: ToastType.Success,
        message: 'Cloud service deleted'
--- a/packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceCreateModal/CloudServiceCreateModal.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceCreateModal/CloudServiceCreateModal.tsx
@@ -12,7 +12,6 @@ import { Text, TextType } from '@noodl-core-ui/components/typography/Text';

 import { ToastType } from '../../../ToastLayer/components/ToastCard';
 import { useCloudServiceContext } from '../CloudServicePanel.context';
-import { ProjectModel } from '@noodl-models/projectmodel';

 function isValidParseUrl(url: string) {
  if (!url) return false;
@@ -64,7 +63,7 @@ export function CloudServiceCreateModal({ isVisible, onClose }: CloudServiceCrea

  async function onCreate() {
    await runActivity('Creating Cloud Service...', async () => {
-      await cloudService.backend.create(ProjectModel.instance, {
+      await cloudService.backend.create({
        name,
        description,
        masterKey: masterKey ? masterKey : undefined,
--- a/packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceModal/CloudSerivceModal.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceModal/CloudSerivceModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';

 import { FeedbackType } from '@noodl-constants/FeedbackType';
 import { CloudService, Environment } from '@noodl-models/CloudServices';
@@ -12,7 +12,6 @@ import { HStack, VStack } from '@noodl-core-ui/components/layout/Stack';
 import { Text } from '@noodl-core-ui/components/typography/Text';

 import { ToastLayer } from '../../../ToastLayer';
-import { ProjectModel } from '@noodl-models/projectmodel';

 export interface CloudServiceModalProps {
  isVisible: boolean;
@@ -61,7 +60,7 @@ function AsSelfHosted({
    }

    CloudService.instance.backend
-      .update(ProjectModel.instance, {
+      .update({
        id: environment.id,
        name,
        description,
@@ -71,7 +70,7 @@ function AsSelfHosted({
      })
      .then(() => {
        ToastLayer.showSuccess(`Updated Cloud Service`);
-        CloudService.instance.backend.fetch(ProjectModel.instance);
+        CloudService.instance.backend.fetch();
      })
      .catch(() => {
        ToastLayer.showError(`Failed to update Cloud Service`);
--- a/packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServicePanel.context.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServicePanel.context.tsx
@@ -35,7 +35,7 @@ export function CloudServiceContextProvider({ children }) {
  const { hasActivity, runActivity } = useActivityQueue({
    onSuccess: async () => {
      // Always fetch all the backends after something have changed
-      await cloudService.backend.fetch(ProjectModel.instance);
+      await cloudService.backend.fetch();
    }
  });

--- a/packages/noodl-editor/src/editor/src/views/panels/NodeReferencesPanel/NodeReferencesPanel.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/NodeReferencesPanel/NodeReferencesPanel.tsx
@@ -1,14 +1,12 @@
 import { NodeGraphContextTmp } from '@noodl-contexts/NodeGraphContext/NodeGraphContext';
+import { type NodeReference, useNodeReferencesContext } from '@noodl-contexts/NodeReferencesContext';
 import { useFocusRefOnPanelActive } from '@noodl-hooks/useFocusRefOnPanelActive';
 import { useNodeLibraryLoaded } from '@noodl-hooks/useNodeLibraryLoaded';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';

 import { INodeColorScheme } from '@noodl-types/nodeTypes';
-import { ComponentModel } from '@noodl-models/componentmodel';
-import { NodeGraphNode } from '@noodl-models/nodegraphmodel';
-import { NodeLibrary, NodeLibraryNodeType } from '@noodl-models/nodelibrary';
+import { NodeLibrary } from '@noodl-models/nodelibrary';
 import { BasicNodeType } from '@noodl-models/nodelibrary/BasicNodeType';
-import { ProjectModel } from '@noodl-models/projectmodel';

 import { EditorNode } from '@noodl-core-ui/components/common/EditorNode';
 import { IconName, IconSize } from '@noodl-core-ui/components/common/Icon';
@@ -26,113 +24,17 @@ import { Section, SectionVariant } from '@noodl-core-ui/components/sidebar/Secti
 import { Label } from '@noodl-core-ui/components/typography/Label';

 import { NodeReferencesPanel_ID } from '.';
-import { EventDispatcher } from '../../../../../shared/utils/EventDispatcher';
-
-type ResultItem = {
-  type: NodeLibraryNodeType;
-  displayName: string;
-  referenaces: {
-    displayName: string;
-    node?: NodeGraphNode;
-    component: ComponentModel;
-  }[];
-};
-
-function useNodeReferences() {
-  const [group] = useState({});
-  const [result, setResult] = useState<ResultItem[]>([]);
-
-  useEffect(() => {
-    function updateIndex() {
-      const types: { [key: string]: ResultItem['type'] } = {};
-      const references = new Map<string, ResultItem['referenaces']>();
-
-      function handleComponent(component: ComponentModel) {
-        component.forEachNode((node: NodeGraphNode) => {
-          const name = node.type.name;
-
-          // Add the reference
-          references.set(name, [
-            ...(references.get(name) || []),
-            {
-              displayName: component.displayName || component.name,
-              node,
-              component
-            }
-          ]);
-
-          // Repeater
-          if (name === 'For Each' && node.parameters.template) {
-            const templateComponent = ProjectModel.instance.getComponentWithName(node.parameters.template);
-
-            if (templateComponent) {
-              references.set(templateComponent.fullName, [
-                ...(references.get(templateComponent.fullName) || []),
-                {
-                  displayName: component.displayName || component.name,
-                  node,
-                  component
-                }
-              ]);
-
-              handleComponent(templateComponent);
-            }
-          }
-
-          // Add some metadata for this node if we dont have it yet.
-          if (!types[name]) {
-            types[name] = node.type;
-          }
-        });
-      }
-
-      // Loop all the nodes in the project
-      ProjectModel.instance.forEachComponent(handleComponent);
-
-      // Combine the result to look a little better.
-      const results: ResultItem[] = Array.from(references.keys())
-        .map((key) => ({
-          type: types[key],
-          displayName: types[key]?.displayName || key,
-          referenaces: references.get(key)
-        }))
-        .sort((a, b) => b.referenaces.length - a.referenaces.length);
-
-      setResult(results);
-    }
-
-    updateIndex();
-
-    EventDispatcher.instance.on(
-      [
-        'Model.nodeAdded',
-        'Model.nodeRemoved',
-        'Model.componentAdded',
-        'Model.componentRemoved',
-        'Model.componentRenamed'
-      ],
-      updateIndex,
-      group
-    );
-
-    return function () {
-      EventDispatcher.instance.off(group);
-    };
-  }, []);
-
-  return [result];
-}

 export function NodeReferencesPanel() {
  const [searchTerm, setSearchTerm] = useState('');
  const [includeCoreNodes, setIncludeCoreNodes] = useState(false);
  const inputRef = useRef(null);
-  const [result] = useNodeReferences();
+  const { nodeReferences } = useNodeReferencesContext();
  const nodeLibraryLoaded = useNodeLibraryLoaded();

  useFocusRefOnPanelActive(inputRef, NodeReferencesPanel_ID);

-  function searchFilter(x: ResultItem) {
+  function searchFilter(x: NodeReference) {
    if (x.displayName.toLowerCase().includes(searchTerm)) {
      return true;
    }
@@ -144,7 +46,7 @@ export function NodeReferencesPanel() {
    return false;
  }

-  let filteredResult = result.filter(searchFilter);
+  let filteredResult = nodeReferences.filter(searchFilter);
  if (!includeCoreNodes) {
    filteredResult = filteredResult.filter((x) => x.displayName.startsWith('/'));
  }
@@ -185,7 +87,7 @@ export function NodeReferencesPanel() {
 }

 interface ItemProps {
-  entry: ResultItem;
+  entry: NodeReference;
 }

 function Item({ entry }: ItemProps) {
@@ -245,8 +147,8 @@ function Item({ entry }: ItemProps) {
 }

 interface ItemReferenceProps {
-  entry: ResultItem;
-  referenace: ResultItem['referenaces'][0];
+  entry: NodeReference;
+  referenace: NodeReference['referenaces'][0];
  colors: INodeColorScheme;
 }

--- a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/VersionControlPanel.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/VersionControlPanel.tsx
@@ -199,6 +199,7 @@ function BaseVersionControlPanel() {

 export function VersionControlPanel() {
  const [git, setGit] = useState<Git>(null);
+  const [state, setState] = useState<'loading' | 'loaded' | 'not-git'>('loading');

  async function createGit() {
    const gitClient = new Git(mergeProject);
@@ -206,12 +207,18 @@ export function VersionControlPanel() {
    setGit(gitClient);
  }

-  const isGitProject = git === null ? LocalProjectsModel.instance.isGitProject(ProjectModel.instance) : true;
  useEffect(() => {
-    if (isGitProject) {
-      createGit();
-    }
-  }, [isGitProject]);
+    LocalProjectsModel.instance
+      .isGitProject(ProjectModel.instance)
+      .then(async (isGitProject) => {
+        if (isGitProject) {
+          await createGit();
+          setState('loaded');
+        } else {
+          setState('not-git');
+        }
+      });
+  }, []);

  async function setupGit() {
    const gitClient = new Git(mergeProject);
@@ -220,7 +227,7 @@ export function VersionControlPanel() {
    setGit(gitClient);
  }

-  if (git === null && !isGitProject) {
+  if (git === null && state === 'not-git') {
    return (
      <BasePanel isFill title="Version Control">
        <Box hasXSpacing hasYSpacing>
--- a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/CommitChangesDiff.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/CommitChangesDiff.tsx
@@ -6,11 +6,13 @@ import { Commit } from '@noodl/git/src/core/models/snapshot';
 import { FileChange } from '@noodl/git/src/core/models/status';
 import { revRange } from '@noodl/git/src/core/rev-list';

+import { ProjectModel } from '@noodl-models/projectmodel';
 import { applyPatches } from '@noodl-models/ProjectPatches/applypatches';
 import { mergeProject } from '@noodl-utils/projectmerger';
 import { ProjectDiff, diffProject } from '@noodl-utils/projectmerger.diff';

 import { useVersionControlContext } from '../context';
+import { getProjectFilePath } from '../context/DiffUtils';
 import { DiffList } from './DiffList';

 //Kind:
@@ -124,7 +126,10 @@ async function getMergeDiff(repositoryPath: string, commit: Commit, refToDiffTo:
 }

 async function getProjectFile(commit: Commit) {
-  const projectContent = JSON.parse(await commit.getFileAsString('project.json'));
+  const projectFilePath = getProjectFilePath(commit.repositoryDir, ProjectModel.instance._retainedProjectDirectory);
+
+  const projectContentRaw = await commit.getFileAsString(projectFilePath);
+  const projectContent = JSON.parse(projectContentRaw);
  applyPatches(projectContent);
  return projectContent;
 }
--- a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/DiffList.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/DiffList.tsx
@@ -61,7 +61,7 @@ export function DiffList({ diff, fileChanges, componentDiffTitle, actions, commi
  const [imageDiff, setImageDiff] = useState<IImageDiff>(null);

  const components = diff?.components ? getChangedComponents(diff.components) : [];
-  const files = (fileChanges || [])?.filter((f) => f.path !== 'project.json') || [];
+  const files = (fileChanges || [])?.filter((f) => !f.path.endsWith('project.json')) || [];
  const settings = diff?.settings ? getChangedObjectProperties(diff.settings) : [];
  const colorStyles = diff?.styles.colors ? getChangedObjectProperties(diff.styles.colors) : [];
  const textStyles = diff?.styles.text ? getChangedObjectProperties(diff.styles.text) : [];
--- a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/context/DiffUtils.ts
+++ b/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/context/DiffUtils.ts
@@ -1,21 +1,24 @@
+import path from 'path';
+import { getCommit } from '@noodl/git/src/core/logs';
+import { FileStatusKind } from '@noodl/git/src/core/models/status';
+
+import { FeedbackType } from '@noodl-constants/FeedbackType';
+import { applyPatches } from '@noodl-models/ProjectPatches/applypatches';
 import {
  ProjectDiff,
  ProjectDiffItem,
  ProjectBasicDiffItem,
  ArrayDiff,
-  diffProject
+  diffProject,
+  createEmptyArrayDiff
 } from '@noodl-utils/projectmerger.diff';

+import { IconName } from '@noodl-core-ui/components/common/Icon';
+import { ListItemProps } from '@noodl-core-ui/components/layout/ListItem';
+
 import { ProjectModel } from '../../../../models/projectmodel';

-import { applyPatches } from '@noodl-models/ProjectPatches/applypatches';
-import { FileStatusKind } from '@noodl/git/src/core/models/status';
-import { IconName } from '@noodl-core-ui/components/common/Icon';
-import { ListItemProps } from '@noodl-core-ui/components/layout/ListItem';
-import { FeedbackType } from '@noodl-constants/FeedbackType';
-import { getCommit } from '@noodl/git/src/core/logs';
-
-export interface ProjectLocalDiff extends ProjectDiff{
+export interface ProjectLocalDiff extends ProjectDiff {
  baseProject: TSFixme; //Project model as an object from raw json
  commitShaDiffedTo: string;
 }
@@ -84,17 +87,49 @@ export function getFileStatusIconProps(status: FileStatusKind): Partial<ListItem
  }
 }

-export async function doLocalDiff(repositoryPath: string, headCommitId: string): Promise<ProjectLocalDiff> {
-  const baseCommit = await getCommit(repositoryPath, headCommitId);
-  const baseProjectJson = await baseCommit.getFileAsString('project.json');
-  const baseProject = JSON.parse(baseProjectJson);
-  applyPatches(baseProject);
-
-  const diff = diffProject(baseProject, ProjectModel.instance.toJSON());
-
-  return {
-    ...diff,
-    baseProject,
-    commitShaDiffedTo: headCommitId
-  };
+export function getProjectFilePath(repositoryPath: string, projectPath: string) {
+  const relativePath = path.relative(repositoryPath, projectPath);
+  const projectFilePath = path.join(relativePath, 'project.json').replaceAll('\\', '/');
+  return projectFilePath;
+}
+
+export async function doLocalDiff(
+  repositoryPath: string,
+  projectPath: string,
+  headCommitId: string
+): Promise<ProjectLocalDiff> {
+  const projectFilePath = getProjectFilePath(repositoryPath, projectPath);
+
+  try {
+    const baseCommit = await getCommit(projectPath, headCommitId);
+    const baseProjectJson = await baseCommit.getFileAsString(projectFilePath);
+    const baseProject = JSON.parse(baseProjectJson);
+    applyPatches(baseProject);
+
+    const diff = diffProject(baseProject, ProjectModel.instance.toJSON());
+
+    return {
+      ...diff,
+      baseProject,
+      commitShaDiffedTo: headCommitId
+    };
+  } catch (error) {
+    if (error.toString().includes('exists on disk, but not in')) {
+      console.warn('project.json does not exist in this commit.');
+    }
+
+    // Return empty state
+    return {
+      baseProject: {},
+      commitShaDiffedTo: headCommitId,
+      components: createEmptyArrayDiff(),
+      variants: createEmptyArrayDiff(),
+      settings: createEmptyArrayDiff(),
+      styles: {
+        colors: createEmptyArrayDiff(),
+        text: createEmptyArrayDiff()
+      },
+      cloudservices: createEmptyArrayDiff()
+    };
+  }
 }
--- a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/context/index.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/context/index.tsx
@@ -8,6 +8,7 @@ import { Slot } from '@noodl-core-ui/types/global';
 import { doLocalDiff, ProjectLocalDiff } from './DiffUtils';
 import { useVersionControlFetch } from './fetch.context';
 import { BranchStatus, IVersionControlContext } from './types';
+import { ProjectModel } from '@noodl-models/projectmodel';

 const VersionControlContext = createContext<IVersionControlContext>({
  git: null,
@@ -57,7 +58,8 @@ export function VersionControlProvider({ git, children }: { git: Git; children:
    (async () => {
      const currentCommitSha = await git.getHeadCommitId();
      if (currentCommitSha) {
-        const diff = await doLocalDiff(git.repositoryPath, currentCommitSha);
+        const projectPath = ProjectModel.instance._retainedProjectDirectory;
+        const diff = await doLocalDiff(git.repositoryPath, projectPath, currentCommitSha);
        setLocalDiff(diff);
      }
    })();
--- a/packages/noodl-editor/src/editor/src/views/panels/componentspanel/ComponentsPanel.ts
+++ b/packages/noodl-editor/src/editor/src/views/panels/componentspanel/ComponentsPanel.ts
@@ -17,9 +17,11 @@ import { EventDispatcher } from '../../../../../shared/utils/EventDispatcher';
 import View from '../../../../../shared/view';
 import { NodeGraphEditor } from '../../nodegrapheditor';
 import * as NewPopupLayer from '../../PopupLayer/index';
+import { type PopupMenuItem } from '../../PopupLayer/index';
 import { ToastLayer } from '../../ToastLayer/ToastLayer';
 import { ComponentsPanelFolder } from './ComponentsPanelFolder';
 import { ComponentTemplates } from './ComponentTemplates';
+import { HACK_findNodeReference } from '@noodl-contexts/NodeReferencesContext';

 const PopupLayer = require('@noodl-views/popuplayer');
 const ComponentsPanelTemplate = require('../../../templates/componentspanel.html');
@@ -961,7 +963,7 @@ export class ComponentsPanelView extends View {
      forRuntimeType: this.getRuntimeType()
    });

-    let items: TSFixme[] = templates.map((t) => ({
+    let items: PopupMenuItem[] = templates.map((t) => ({
      icon: IconName.Plus,
      label: t.label,
      onClick: () => {
@@ -987,6 +989,10 @@ export class ComponentsPanelView extends View {
      });
    }

+    // Find references
+    const nodeReference = HACK_findNodeReference(scope.comp.name);
+    const nodeReferencesText = `Used in ${nodeReference?.referenaces?.length || 0} places`;
+
    items = items.concat([
      {
        icon: IconName.Pencil,
@@ -1011,6 +1017,9 @@ export class ComponentsPanelView extends View {
          _this.onDeleteClicked(scope, el);
          evt.stopPropagation();
        }
+      },
+      {
+        label: nodeReferencesText
      }
    ]);

@@ -1110,6 +1119,16 @@ export class ComponentsPanelView extends View {
      }
    ]);

+    if (scope.canBecomeRoot) {
+      // Find references
+      const nodeReference = HACK_findNodeReference(scope.folder.component.name);
+      const nodeReferencesText = `Used in ${nodeReference?.referenaces?.length || 0} places`;
+
+      items = items.concat([{
+        label: nodeReferencesText
+      }]);
+    }
+
    const menu = new NewPopupLayer.PopupMenu({
      items: items
    });
--- a/packages/noodl-editor/src/editor/src/views/panels/search-panel/search-panel.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/search-panel/search-panel.tsx
@@ -5,9 +5,9 @@ import { useSidePanelKeyboardCommands } from '@noodl-hooks/useKeyboardCommands';
 import classNames from 'classnames';
 import React, { useEffect, useRef, useState } from 'react';

+import { Keybindings } from '@noodl-constants/Keybindings';
 import { ComponentModel } from '@noodl-models/componentmodel';
 import { NodeGraphNode } from '@noodl-models/nodegraphmodel';
-import { KeyCode, KeyMod } from '@noodl-utils/keyboard/KeyCode';
 import { performSearch } from '@noodl-utils/universal-search';

 import { SearchInput } from '@noodl-core-ui/components/inputs/SearchInput';
@@ -40,7 +40,7 @@ export function SearchPanel() {
          inputRef.current.focus();
          inputRef.current.select();
        },
-        keybinding: KeyMod.CtrlCmd | KeyCode.KEY_F
+        keybinding: Keybindings.SEARCH.hash
      }
    ],
    'search'
--- a/packages/noodl-git/src/core/open.ts
+++ b/packages/noodl-git/src/core/open.ts
@@ -22,7 +22,11 @@ export async function open(basePath: string): Promise<string> {
  //   console.log("VCS error when opening project: " + e);
  // }

-  return basePath;
+
+  // Find the relative git repository path
+  const repositoryPath = await getTopLevelWorkingDirectory(basePath);
+
+  return repositoryPath;
 }

 /**
--- a/packages/noodl-runtime/src/api/cloudstore.js
+++ b/packages/noodl-runtime/src/api/cloudstore.js
@@ -32,12 +32,15 @@ class CloudStore {

  _initCloudServices() {
    _collections = undefined; // clear collection cache, so it's refetched
-    const cloudServices = NoodlRuntime.instance.getMetaData('cloudservices');

+    const cloudServices = NoodlRuntime.instance.getMetaData('cloudservices');
    if (cloudServices) {
      this.appId = cloudServices.appId;
      this.endpoint = cloudServices.endpoint;
    }
+
+    const dbVersionMajor = NoodlRuntime.instance.getMetaData('dbVersionMajor');
+    this.dbVersionMajor = dbVersionMajor;
  }

  on() {
@@ -70,8 +73,9 @@ class CloudStore {
      xhr.open(options.method || 'GET', this.endpoint + path, true);

      xhr.setRequestHeader('X-Parse-Application-Id', this.appId);
-      if (typeof _noodl_cloudservices !== 'undefined')
+      if (typeof _noodl_cloudservices !== 'undefined') {
        xhr.setRequestHeader('X-Parse-Master-Key', _noodl_cloudservices.masterKey);
+      }

      // Check for current users
      var _cu = localStorage['Parse/' + this.appId + '/currentUser'];
@@ -168,13 +172,10 @@ class CloudStore {
      return;
    }

-    if (options.where) args.push('match=' + encodeURIComponent(JSON.stringify(options.where)));
    if (options.limit) args.push('limit=' + options.limit);
    if (options.skip) args.push('skip=' + options.skip);

-    const grouping = {
-      objectId: null
-    };
+    const grouping = {};

    Object.keys(options.group).forEach((k) => {
      const _g = {};
@@ -188,7 +189,20 @@ class CloudStore {
      grouping[k] = _g;
    });

-    args.push('group=' + JSON.stringify(grouping));
+    // I don't know which version the API was changed, lets just say above 4 for now.
+    if (this.dbVersionMajor && this.dbVersionMajor > 4) {
+      grouping._id = null;
+
+      if (options.where) args.push('$match=' + encodeURIComponent(JSON.stringify(options.where)));
+
+      args.push('$group=' + JSON.stringify(grouping));
+    } else {
+      grouping.objectId = null;
+
+      if (options.where) args.push('match=' + encodeURIComponent(JSON.stringify(options.where)));
+
+      args.push('group=' + JSON.stringify(grouping));
+    }

    this._makeRequest('/aggregate/' + options.collection + (args.length > 0 ? '?' + args.join('&') : ''), {
      success: function (response) {
@@ -244,11 +258,34 @@ class CloudStore {
    });
  }

+  /**
+   *
+   * @param {{
+   *    objectId: string;
+   *    collection: string;
+   *    keys?: string[] | string;
+   *    include?: string[] | string;
+   *    excludeKeys?: string[] | string;
+   *    success: (data: unknown) => void;
+   *    error: (error: unknown) => void;
+   * }} options
+   */
  fetch(options) {
    const args = [];

-    if (options.include)
+    if (options.include) {
      args.push('include=' + (Array.isArray(options.include) ? options.include.join(',') : options.include));
+    }
+
+    if (options.keys) {
+      args.push('keys=' + (Array.isArray(options.keys) ? options.keys.join(',') : options.keys));
+    }
+
+    if (options.excludeKeys) {
+      args.push(
+        'excludeKeys=' + (Array.isArray(options.excludeKeys) ? options.excludeKeys.join(',') : options.excludeKeys)
+      );
+    }

    this._makeRequest(
      '/classes/' + options.collection + '/' + options.objectId + (args.length > 0 ? '?' + args.join('&') : ''),
@@ -420,6 +457,8 @@ class CloudStore {
   *    file: {
   *      name: string;
   *    }
+   *    success: (data: unknown) => void;
+   *    error: (error: unknown) => void;
   * }} options
   */
  deleteFile(options) {
@@ -550,21 +589,26 @@ function _deserializeJSON(data, type, modelScope) {
 }

 function _fromJSON(item, collectionName, modelScope) {
-  const m = (modelScope || Model).get(item.objectId);
-  m._class = collectionName;
+  const modelStore = modelScope || Model;

-  if (collectionName !== undefined && CloudStore._collections[collectionName] !== undefined)
-    var schema = CloudStore._collections[collectionName].schema;
+  const model = modelStore.get(item.objectId);
+  model._class = collectionName;

-  for (var key in item) {
-    if (key === 'objectId' || key === 'ACL') continue;
-
-    var _type = schema && schema.properties && schema.properties[key] ? schema.properties[key].type : undefined;
-
-    m.set(key, _deserializeJSON(item[key], _type, modelScope));
+  let schema = undefined;
+  if (collectionName !== undefined && CloudStore._collections[collectionName] !== undefined) {
+    schema = CloudStore._collections[collectionName].schema;
  }

-  return m;
+  for (const key in item) {
+    if (key === 'objectId' || key === 'ACL') {
+      continue;
+    }
+
+    const _type = schema && schema.properties && schema.properties[key] ? schema.properties[key].type : undefined;
+    model.set(key, _deserializeJSON(item[key], _type, modelScope));
+  }
+
+  return model;
 }

 CloudStore._fromJSON = _fromJSON;
--- a/packages/noodl-runtime/src/api/queryutils.js
+++ b/packages/noodl-runtime/src/api/queryutils.js
@@ -36,16 +36,15 @@ function convertVisualFilter(query, options) {
    const _res = {};
    var cond;
    var value = query.input !== undefined ? inputs[query.input] : query.value;
-    
+
    if (query.operator === 'exist') {
-        _res[query.property] = { $exists: true };
-        return _res;
+      _res[query.property] = { $exists: true };
+      return _res;
+    } else if (query.operator === 'not exist') {
+      _res[query.property] = { $exists: false };
+      return _res;
    }
-    else if (query.operator === 'not exist') {
-        _res[query.property] = { $exists: false };
-        return _res;
-    }
-    
+
    if (value === undefined) return;

    if (CloudStore._collections[options.collectionName])
@@ -80,7 +79,6 @@ function convertVisualFilter(query, options) {
      cond = { $regex: value, $options: 'i' };
    }

-
    _res[query.property] = cond;

    return _res;
@@ -163,10 +161,22 @@ function _value(v) {
  return v;
 }

+/**
+ *
+ * @param {Record<string, unknown>} filter
+ * @param {{
+ *   collectionName?: string;
+ *   modelScope?: unknown;
+ *   error: (error: string) => void;
+ * }} options
+ * @returns
+ */
 function convertFilterOp(filter, options) {
  const keys = Object.keys(filter);
  if (keys.length === 0) return {};
-  if (keys.length !== 1) return options.error('Filter must only have one key found ' + keys.join(','));
+  if (keys.length !== 1) {
+    return options.error('Filter must only have one key found ' + keys.join(','));
+  }

  const res = {};
  const key = keys[0];
@@ -179,18 +189,27 @@ function convertFilterOp(filter, options) {
  } else if (filter['idContainedIn'] !== undefined) {
    res['objectId'] = { $in: filter['idContainedIn'] };
  } else if (filter['relatedTo'] !== undefined) {
-    var modelId = filter['relatedTo']['id'];
-    if (modelId === undefined) return options.error('Must provide id in relatedTo filter');
+    const modelId = filter['relatedTo']['id'];
+    if (modelId === undefined) {
+      return options.error('Must provide id in relatedTo filter');
+    }

-    var relationKey = filter['relatedTo']['key'];
-    if (relationKey === undefined) return options.error('Must provide key in relatedTo filter');
+    const relationKey = filter['relatedTo']['key'];
+    if (relationKey === undefined) {
+      return options.error('Must provide key in relatedTo filter');
+    }
+
+    const className = filter['relatedTo']['className'] || (options.modelScope || Model).get(modelId)?._class;
+    if (typeof className === 'undefined') {
+      // Either the pointer is loaded as an object or we allow passing in the className.
+      return options.error('Must preload the Pointer or include className');
+    }

-    var m = (options.modelScope || Model).get(modelId);
    res['$relatedTo'] = {
      object: {
        __type: 'Pointer',
        objectId: modelId,
-        className: m._class
+        className
      },
      key: relationKey
    };
@@ -208,13 +227,14 @@ function convertFilterOp(filter, options) {
    else if (opAndValue['containedIn'] !== undefined) res[key] = { $in: opAndValue['containedIn'] };
    else if (opAndValue['notContainedIn'] !== undefined) res[key] = { $nin: opAndValue['notContainedIn'] };
    else if (opAndValue['pointsTo'] !== undefined) {
-      var m = (options.modelScope || Model).get(opAndValue['pointsTo']);
-      if (CloudStore._collections[options.collectionName])
-        var schema = CloudStore._collections[options.collectionName].schema;
+      let schema = null;
+      if (CloudStore._collections[options.collectionName]) {
+        schema = CloudStore._collections[options.collectionName].schema;
+      }

-      var targetClass =
+      const targetClass =
        schema && schema.properties && schema.properties[key] ? schema.properties[key].targetClass : undefined;
-      var type = schema && schema.properties && schema.properties[key] ? schema.properties[key].type : undefined;
+      const type = schema && schema.properties && schema.properties[key] ? schema.properties[key].type : undefined;

      if (type === 'Relation') {
        res[key] = {
@@ -223,13 +243,13 @@ function convertFilterOp(filter, options) {
          className: targetClass
        };
      } else {
-        if (Array.isArray(opAndValue['pointsTo']))
+        if (Array.isArray(opAndValue['pointsTo'])) {
          res[key] = {
            $in: opAndValue['pointsTo'].map((v) => {
              return { __type: 'Pointer', objectId: v, className: targetClass };
            })
          };
-        else
+        } else {
          res[key] = {
            $eq: {
              __type: 'Pointer',
@@ -237,6 +257,7 @@ function convertFilterOp(filter, options) {
              className: targetClass
            }
          };
+        }
      }
    } else if (opAndValue['matchesRegex'] !== undefined) {
      res[key] = {
@@ -257,43 +278,42 @@ function convertFilterOp(filter, options) {
            }
          }
        };
-    // Geo points
+      // Geo points
    } else if (opAndValue['nearSphere'] !== undefined) {
      var _v = opAndValue['nearSphere'];
      res[key] = {
        $nearSphere: {
-          __type: "GeoPoint",
+          __type: 'GeoPoint',
          latitude: _v.latitude,
-          longitude: _v.longitude,
+          longitude: _v.longitude
        },
-        $maxDistanceInMiles:_v.$maxDistanceInMiles,
-        $maxDistanceInKilometers:_v.maxDistanceInKilometers,
-        $maxDistanceInRadians:_v.maxDistanceInRadians
+        $maxDistanceInMiles: _v.$maxDistanceInMiles,
+        $maxDistanceInKilometers: _v.maxDistanceInKilometers,
+        $maxDistanceInRadians: _v.maxDistanceInRadians
      };
    } else if (opAndValue['withinBox'] !== undefined) {
      var _v = opAndValue['withinBox'];
      res[key] = {
-        $within:{
-          $box: _v.map(gp => ({
-            __type:"GeoPoint",
-            latitude:gp.latitude,
-            longitude:gp.longitude
+        $within: {
+          $box: _v.map((gp) => ({
+            __type: 'GeoPoint',
+            latitude: gp.latitude,
+            longitude: gp.longitude
          }))
        }
      };
    } else if (opAndValue['withinPolygon'] !== undefined) {
      var _v = opAndValue['withinPolygon'];
      res[key] = {
-        $geoWithin:{
-          $polygon: _v.map(gp => ({
-            __type:"GeoPoint",
-            latitude:gp.latitude,
-            longitude:gp.longitude
+        $geoWithin: {
+          $polygon: _v.map((gp) => ({
+            __type: 'GeoPoint',
+            latitude: gp.latitude,
+            longitude: gp.longitude
          }))
        }
      };
    }
-
  } else {
    options.error('Unrecognized filter keys ' + keys.join(','));
  }
--- a/packages/noodl-runtime/src/api/records.js
+++ b/packages/noodl-runtime/src/api/records.js
@@ -12,7 +12,7 @@ function createRecordsAPI(modelScope) {

  return {
    async query(className, query, options) {
-      if (typeof className === "undefined") throw new Error("'className' is undefined");
+      if (typeof className === 'undefined') throw new Error("'className' is undefined");
      return new Promise((resolve, reject) => {
        cloudstore().query({
          collection: className,
@@ -27,9 +27,9 @@ function createRecordsAPI(modelScope) {
          include: options ? options.include : undefined,
          select: options ? options.select : undefined,
          count: options ? options.count : undefined,
-          success: (results,count) => {
+          success: (results, count) => {
            const _results = results.map((r) => cloudstore()._fromJSON(r, className));
-            if(count !== undefined)  resolve({results:_results,count});
+            if (count !== undefined) resolve({ results: _results, count });
            else resolve(_results);
          },
          error: (err) => {
@@ -40,7 +40,7 @@ function createRecordsAPI(modelScope) {
    },

    async count(className, query) {
-      if (typeof className === "undefined") throw new Error("'className' is undefined");
+      if (typeof className === 'undefined') throw new Error("'className' is undefined");
      return new Promise((resolve, reject) => {
        cloudstore().count({
          collection: className,
@@ -62,7 +62,7 @@ function createRecordsAPI(modelScope) {
    },

    async distinct(className, property, query) {
-      if (typeof className === "undefined") throw new Error("'className' is undefined");
+      if (typeof className === 'undefined') throw new Error("'className' is undefined");
      return new Promise((resolve, reject) => {
        cloudstore().distinct({
          collection: className,
@@ -85,7 +85,7 @@ function createRecordsAPI(modelScope) {
    },

    async aggregate(className, group, query) {
-      if (typeof className === "undefined") throw new Error("'className' is undefined");
+      if (typeof className === 'undefined') throw new Error("'className' is undefined");
      return new Promise((resolve, reject) => {
        cloudstore().aggregate({
          collection: className,
@@ -107,20 +107,35 @@ function createRecordsAPI(modelScope) {
      });
    },

+    /**
+     *
+     * @param {string | { getId(): string; }} objectOrId
+     * @param {{
+     *    className: string;
+     *    keys?: string[] | string;
+     *    include?: string[] | string;
+     *    excludeKeys?: string[] | string;
+     * }} options
+     * @returns {Promise<unknown>}
+     */
    async fetch(objectOrId, options) {
      if (typeof objectOrId === 'undefined') return Promise.reject(new Error("'objectOrId' is undefined."));
      if (typeof objectOrId !== 'string') objectOrId = objectOrId.getId();
      const className = (options ? options.className : undefined) || (modelScope || Model).get(objectOrId)._class;

      return new Promise((resolve, reject) => {
-        if (!className) return reject('No class name specified');
+        if (!className) {
+          return reject('No class name specified');
+        }

        cloudstore().fetch({
          collection: className,
          objectId: objectOrId,
-          include: options ? options.include : undefined,
+          keys: options?.keys,
+          include: options?.include,
+          excludeKeys: options?.excludeKeys,
          success: function (response) {
-            var record = cloudstore()._fromJSON(response, className);
+            const record = cloudstore()._fromJSON(response, className);
            resolve(record);
          },
          error: function (err) {
@@ -186,7 +201,7 @@ function createRecordsAPI(modelScope) {
    },

    async create(className, properties, options) {
-      if (typeof className === "undefined") throw new Error("'className' is undefined");
+      if (typeof className === 'undefined') throw new Error("'className' is undefined");
      return new Promise((resolve, reject) => {
        cloudstore().create({
          collection: className,
--- a/packages/noodl-runtime/src/collection.js
+++ b/packages/noodl-runtime/src/collection.js
@@ -1,6 +1,6 @@
-"use strict";
+'use strict';

-var Model = require("./model");
+var Model = require('./model');

 // Get and set proxy
 /*const proxies = {}
@@ -221,48 +221,48 @@ Collection.prototype.toJSON = function() {
 }*/

 // ----
-Object.defineProperty(Array.prototype, "items", {
+Object.defineProperty(Array.prototype, 'items', {
  enumerable: false,
  get() {
    return this;
  },
  set(data) {
    this.set(data);
-  },
+  }
 });
-Object.defineProperty(Array.prototype, "each", {
+Object.defineProperty(Array.prototype, 'each', {
  enumerable: false,
  writable: false,
-  value: Array.prototype.forEach,
+  value: Array.prototype.forEach
 });
-Object.defineProperty(Array.prototype, "size", {
+Object.defineProperty(Array.prototype, 'size', {
  enumerable: false,
  writable: false,
  value: function () {
    return this.length;
-  },
+  }
 });
-Object.defineProperty(Array.prototype, "get", {
+Object.defineProperty(Array.prototype, 'get', {
  enumerable: false,
  writable: false,
  value: function (index) {
    return this[index];
-  },
+  }
 });
-Object.defineProperty(Array.prototype, "getId", {
+Object.defineProperty(Array.prototype, 'getId', {
  enumerable: false,
  writable: false,
  value: function () {
    return this._id;
-  },
+  }
 });
-Object.defineProperty(Array.prototype, "id", {
+Object.defineProperty(Array.prototype, 'id', {
  enumerable: false,
  get() {
    return this.getId();
-  },
+  }
 });
-Object.defineProperty(Array.prototype, "set", {
+Object.defineProperty(Array.prototype, 'set', {
  enumerable: false,
  writable: false,
  value: function (src) {
@@ -323,10 +323,10 @@ Object.defineProperty(Array.prototype, "set", {
    for (i = aItems.length; i < bItems.length; i++) {
      this.add(bItems[i]);
    }
-  },
+  }
 });

-Object.defineProperty(Array.prototype, "notify", {
+Object.defineProperty(Array.prototype, 'notify', {
  enumerable: false,
  writable: false,
  value: async function (event, args) {
@@ -337,80 +337,80 @@ Object.defineProperty(Array.prototype, "notify", {
    for (var i = 0; i < l.length; i++) {
      await l[i](args);
    }
-  },
+  }
 });

-Object.defineProperty(Array.prototype, "contains", {
+Object.defineProperty(Array.prototype, 'contains', {
  enumerable: false,
  writable: false,
  value: function (item) {
    return this.indexOf(item) !== -1;
-  },
+  }
 });

-Object.defineProperty(Array.prototype, "add", {
+Object.defineProperty(Array.prototype, 'add', {
  enumerable: false,
  writable: false,
  value: async function (item) {
    if (this.contains(item)) return; // Already contains item

    this.items.push(item);
-    await this.notify("add", { item: item, index: this.items.length - 1 });
-    await this.notify("change");
-    await item.notify("add", { collection: this });
-  },
+    await this.notify('add', { item: item, index: this.items.length - 1 });
+    await this.notify('change');
+    await item.notify('add', { collection: this });
+  }
 });

-Object.defineProperty(Array.prototype, "remove", {
+Object.defineProperty(Array.prototype, 'remove', {
  enumerable: false,
  writable: false,
  value: function (item) {
    var idx = this.items.indexOf(item);
    if (idx !== -1) this.removeAtIndex(idx);
-  },
+  }
 });

-Object.defineProperty(Array.prototype, "addAtIndex", {
+Object.defineProperty(Array.prototype, 'addAtIndex', {
  enumerable: false,
  writable: false,
  value: async function (item, index) {
    if (this.contains(item)) return; // Already contains item

    this.items.splice(index, 0, item);
-    await this.notify("add", { item: item, index: index });
-    await this.notify("change");
-    await item.notify("add", { collection: this, index: index });
-  },
+    await this.notify('add', { item: item, index: index });
+    await this.notify('change');
+    await item.notify('add', { collection: this, index: index });
+  }
 });

-Object.defineProperty(Array.prototype, "removeAtIndex", {
+Object.defineProperty(Array.prototype, 'removeAtIndex', {
  enumerable: false,
  writable: false,
  value: async function (idx) {
    var item = this.items[idx];
    this.items.splice(idx, 1);
-    await this.notify("remove", { item: item, index: idx });
-    await this.notify("change");
-    await item.notify("remove", { collection: this });
-  },
+    await this.notify('remove', { item: item, index: idx });
+    await this.notify('change');
+    await item.notify('remove', { collection: this });
+  }
 });

-Object.defineProperty(Array.prototype, "on", {
+Object.defineProperty(Array.prototype, 'on', {
  enumerable: false,
  writable: false,
  value: function (event, listener) {
    if (!this._listeners)
-      Object.defineProperty(this, "_listeners", {
+      Object.defineProperty(this, '_listeners', {
        enumerable: false,
        writable: false,
-        value: {},
+        value: {}
      });
    if (!this._listeners[event]) this._listeners[event] = [];
    this._listeners[event].push(listener);
-  },
+  }
 });

-Object.defineProperty(Array.prototype, "off", {
+Object.defineProperty(Array.prototype, 'off', {
  enumerable: false,
  writable: false,
  value: function (event, listener) {
@@ -418,20 +418,20 @@ Object.defineProperty(Array.prototype, "off", {
    if (!this._listeners[event]) return;
    var idx = this._listeners[event].indexOf(listener);
    if (idx !== -1) this._listeners[event].splice(idx, 1);
-  },
+  }
 });

 class Collection extends Array {}

-var collections = (Collection._collections = {});
+const collections = (Collection._collections = {});

 Collection.create = function (items) {
  const name = Model.guid();
  collections[name] = new Collection();
-  Object.defineProperty(collections[name], "_id", {
+  Object.defineProperty(collections[name], '_id', {
    enumerable: false,
    writable: false,
-    value: name,
+    value: name
  });
  if (items) {
    collections[name].set(items);
@@ -439,14 +439,18 @@ Collection.create = function (items) {
  return collections[name];
 };

+/**
+ * @param {string} name
+ * @returns {Collection}
+ */
 Collection.get = function (name) {
  if (name === undefined) name = Model.guid();
  if (!collections[name]) {
    collections[name] = new Collection();
-    Object.defineProperty(collections[name], "_id", {
+    Object.defineProperty(collections[name], '_id', {
      enumerable: false,
      writable: false,
-      value: name,
+      value: name
    });
  }

--- a/packages/noodl-runtime/src/model.js
+++ b/packages/noodl-runtime/src/model.js
@@ -35,6 +35,11 @@ const _modelProxyHandler = {
  }
 };

+/**
+ *
+ * @param {*} id
+ * @returns {Model}
+ */
 Model.get = function (id) {
  if (id === undefined) id = Model.guid();
  if (!models[id]) {
@@ -122,13 +127,22 @@ Model.prototype.fill = function (value = null) {
  }
 };

+/**
+ * @param {string} name
+ * @param {unknown} value
+ * @param {{
+ *  resolve?: boolean;
+ *  forceChange?: boolean;
+ *  silent?: boolean;
+ * }} args
+ */
 Model.prototype.set = function (name, value, args) {
  if (args && args.resolve && name.indexOf('.') !== -1) {
    // We should resolve path references
-    var path = name.split('.');
-    var model = this;
-    for (var i = 0; i < path.length - 1; i++) {
-      var v = model.get(path[i]);
+    const path = name.split('.');
+    let model = this;
+    for (let i = 0; i < path.length - 1; i++) {
+      const v = model.get(path[i]);
      if (Model.instanceOf(v)) model = v;
      else return; // Path resolve failed
    }
@@ -138,24 +152,35 @@ Model.prototype.set = function (name, value, args) {

  const forceChange = args && args.forceChange;

-  var oldValue = this.data[name];
+  const oldValue = this.data[name];
  this.data[name] = value;
-  (forceChange || oldValue !== value) &&
-    (!args || !args.silent) &&
+
+  if ((forceChange || oldValue !== value) && (!args || !args.silent)) {
    this.notify('change', { name: name, value: value, old: oldValue });
+  }
 };

+/**
+ * @returns {string}
+ */
 Model.prototype.getId = function () {
  return this.id;
 };

+/**
+ * @param {string} name
+ * @param {{
+ *  resolve?: boolean;
+ * }} args
+ * @returns {unknown}
+ */
 Model.prototype.get = function (name, args) {
  if (args && args.resolve && name.indexOf('.') !== -1) {
    // We should resolve path references
-    var path = name.split('.');
-    var model = this;
-    for (var i = 0; i < path.length - 1; i++) {
-      var v = model.get(path[i]);
+    const path = name.split('.');
+    let model = this;
+    for (let i = 0; i < path.length - 1; i++) {
+      const v = model.get(path[i]);
      if (Model.instanceOf(v)) model = v;
      else return; // Path resolve failed
    }
--- a/packages/noodl-runtime/src/nodecontext.js
+++ b/packages/noodl-runtime/src/nodecontext.js
@@ -230,7 +230,7 @@ NodeContext.prototype.deregisterComponentModel = function (componentModel) {

 NodeContext.prototype.fetchComponentBundle = async function (name) {
  const fetchBundle = async (name) => {
-    let baseUrl = Noodl.Env["BaseUrl"] || '/';
+    let baseUrl = Noodl.Env['BaseUrl'] || '/';
    let bundleUrl = `${baseUrl}noodl_bundles/${name}.json`;

    const response = await fetch(bundleUrl);
@@ -455,6 +455,15 @@ NodeContext.prototype.setPopupCallbacks = function ({ onShow, onClose }) {
  this.onClosePopup = onClose;
 };

+/**
+ * @param {string} popupComponent
+ * @param {Record<string, unknown>} params
+ * @param {{
+ *  senderNode?: unknown;
+ *  onClosePopup?: (action?: string, results: object) => void;
+ * }} args
+ * @returns
+ */
 NodeContext.prototype.showPopup = async function (popupComponent, params, args) {
  if (!this.onShowPopup) return;

--- a/packages/noodl-runtime/src/nodes/std-library/data/dbcollectionnode2.js
+++ b/packages/noodl-runtime/src/nodes/std-library/data/dbcollectionnode2.js
@@ -28,6 +28,7 @@ var DbCollectionNode = {
      _this.scheduleAfterInputsHaveUpdated(function () {
        _this.flagOutputDirty('count');
        _this.flagOutputDirty('firstItemId');
+        _this.flagOutputDirty('isEmpty');
        collectionChangedScheduled = false;
      });
    };
@@ -66,6 +67,7 @@ var DbCollectionNode = {

        _this.flagOutputDirty('count');
        _this.flagOutputDirty('firstItemId');
+        _this.flagOutputDirty('isEmpty');
      }

      if (args.type === 'create') {
@@ -91,6 +93,7 @@ var DbCollectionNode = {

            _this.flagOutputDirty('count');
            _this.flagOutputDirty('firstItemId');
+            _this.flagOutputDirty('isEmpty');
          } else if (matchesQuery && !_this._internal.collection.contains(m)) {
            // It's not part of the result collection but now matches they query, add it and resort
            _addModelAtCorrectIndex(m);
@@ -106,6 +109,7 @@ var DbCollectionNode = {

          _this.flagOutputDirty('count');
          _this.flagOutputDirty('firstItemId');
+          _this.flagOutputDirty('isEmpty');
        }
      }
    };
@@ -153,6 +157,17 @@ var DbCollectionNode = {
        }
      }
    },
+    isEmpty: {
+      type: 'boolean',
+      displayName: 'Is Empty',
+      group: 'General',
+      getter: function () {
+        if (this._internal.collection) {
+          return this._internal.collection.size() === 0;
+        }
+        return true;
+      }
+    },
    count: {
      type: 'number',
      displayName: 'Count',
@@ -189,6 +204,7 @@ var DbCollectionNode = {
    setCollection: function (collection) {
      this.bindCollection(collection);
      this.flagOutputDirty('firstItemId');
+      this.flagOutputDirty('isEmpty');
      this.flagOutputDirty('items');
      this.flagOutputDirty('count');
    },
@@ -257,7 +273,7 @@ var DbCollectionNode = {
        limit: limit,
        skip: skip,
        count: count,
-        success: (results,count) => {
+        success: (results, count) => {
          if (results !== undefined) {
            _c.set(
              results.map((i) => {
@@ -267,10 +283,9 @@ var DbCollectionNode = {
              })
            );
          }
-          if(count !== undefined) {
+          if (count !== undefined) {
            this._internal.storageSettings.storageTotalCount = count;
-            if(this.hasOutput('storageTotalCount')) 
-              this.flagOutputDirty('storageTotalCount');
+            if (this.hasOutput('storageTotalCount')) this.flagOutputDirty('storageTotalCount');
          }
          this.setCollection(_c);
          this.sendSignalOnOutput('fetched');
@@ -383,7 +398,7 @@ var DbCollectionNode = {
      if (!storageSettings['storageEnableLimit']) return;
      else return storageSettings['storageSkip'] || 0;
    },
-    getStorageFetchTotalCount: function() {
+    getStorageFetchTotalCount: function () {
      const storageSettings = this._internal.storageSettings;

      return !!storageSettings['storageEnableCount'];
--- a/packages/noodl-runtime/src/nodes/std-library/data/dbmodelnode2.js
+++ b/packages/noodl-runtime/src/nodes/std-library/data/dbmodelnode2.js
@@ -2,10 +2,10 @@

 const { Node, EdgeTriggeredInput } = require('../../../../noodl-runtime');

-var Model = require('../../../model');
+const Model = require('../../../model');
 const CloudStore = require('../../../api/cloudstore');

-var ModelNodeDefinition = {
+const ModelNodeDefinition = {
  name: 'DbModel2',
  docs: 'https://docs.noodl.net/nodes/data/cloud-data/record',
  displayNodeName: 'Record',
@@ -21,11 +21,11 @@ var ModelNodeDefinition = {
    }
  ],
  initialize: function () {
-    var internal = this._internal;
+    const internal = this._internal;
    internal.inputValues = {};
    internal.relationModelIds = {};

-    var _this = this;
+    const _this = this;
    this._internal.onModelChangedCallback = function (args) {
      if (_this.isInputConnected('fetch')) return;

@@ -109,13 +109,18 @@ var ModelNodeDefinition = {
      displayName: 'Id',
      group: 'General',
      set: function (value) {
-        if (value instanceof Model) value = value.getId();
-        // Can be passed as model as well
-        else if (typeof value === 'object') value = Model.create(value).getId(); // If this is an js object, dereference it
+        if (value instanceof Model) {
+          // Can be passed as model as well
+          value = value.getId();
+        } else if (typeof value === 'object') {
+          // If this is an js object, dereference it
+          value = Model.create(value).getId();
+        }

        this._internal.modelId = value; // Wait to fetch data
-        if (this.isInputConnected('fetch') === false) this.setModelID(value);
-        else {
+        if (this.isInputConnected('fetch') === false) {
+          this.setModelID(value);
+        } else {
          this.flagOutputDirty('id');
        }
      }
@@ -138,9 +143,10 @@ var ModelNodeDefinition = {
      this.setModel(model);
    },
    setModel: function (model) {
-      if (this._internal.model)
+      if (this._internal.model) {
        // Remove old listener if existing
        this._internal.model.off('change', this._internal.onModelChangedCallback);
+      }

      this._internal.model = model;
      this.flagOutputDirty('id');
@@ -148,7 +154,9 @@ var ModelNodeDefinition = {

      // We have a new model, mark all outputs as dirty
      for (var key in model.data) {
-        if (this.hasOutput('prop-' + key)) this.flagOutputDirty('prop-' + key);
+        if (this.hasOutput('prop-' + key)) {
+          this.flagOutputDirty('prop-' + key);
+        }
      }
      this.sendSignalOnOutput('fetched');
    },
@@ -184,7 +192,7 @@ var ModelNodeDefinition = {
      }
    },
    scheduleFetch: function () {
-      var _this = this;
+      const _this = this;
      const internal = this._internal;

      this.scheduleOnce('Fetch', function () {
@@ -199,12 +207,13 @@ var ModelNodeDefinition = {
          collection: internal.collectionId,
          objectId: internal.modelId, // Get the objectId part of the model id
          success: function (response) {
-            var model = cloudstore._fromJSON(response, internal.collectionId);
+            const model = cloudstore._fromJSON(response, internal.collectionId);
            if (internal.model !== model) {
              // Check if we need to change model
-              if (internal.model)
+              if (internal.model) {
                // Remove old listener if existing
                internal.model.off('change', internal.onModelChangedCallback);
+              }

              internal.model = model;
              model.on('change', internal.onModelChangedCallback);
@@ -213,8 +222,10 @@ var ModelNodeDefinition = {

            delete response.objectId;

-            for (var key in response) {
-              if (_this.hasOutput('prop-' + key)) _this.flagOutputDirty('prop-' + key);
+            for (const key in response) {
+              if (_this.hasOutput('prop-' + key)) {
+                _this.flagOutputDirty('prop-' + key);
+              }
            }

            _this.sendSignalOnOutput('fetched');
@@ -226,7 +237,6 @@ var ModelNodeDefinition = {
      });
    },
    scheduleStore: function () {
-      var _this = this;
      var internal = this._internal;
      if (!internal.model) return;

@@ -247,8 +257,6 @@ var ModelNodeDefinition = {
        });
    },
    registerInputIfNeeded: function (name) {
-      var _this = this;
-
      if (this.hasInput(name)) {
        return;
      }
@@ -328,8 +336,7 @@ function updatePorts(nodeId, parameters, editorConnection, graphModel) {
        var p = props[key];
        if (ports.find((_p) => _p.name === key)) continue;

-        if (p.type === 'Relation') {
-        } else {
+        if (p.type !== 'Relation') {
          // Other schema type ports
          const _typeMap = {
            String: 'string',
@@ -373,16 +380,16 @@ module.exports = {
    function _managePortsForNode(node) {
      updatePorts(node.id, node.parameters, context.editorConnection, graphModel);

-      node.on('parameterUpdated', function (event) {
+      node.on('parameterUpdated', function () {
        updatePorts(node.id, node.parameters, context.editorConnection, graphModel);
      });

-      graphModel.on('metadataChanged.dbCollections', function (data) {
+      graphModel.on('metadataChanged.dbCollections', function () {
        CloudStore.invalidateCollections();
        updatePorts(node.id, node.parameters, context.editorConnection, graphModel);
      });

-      graphModel.on('metadataChanged.systemCollections', function (data) {
+      graphModel.on('metadataChanged.systemCollections', function () {
        CloudStore.invalidateCollections();
        updatePorts(node.id, node.parameters, context.editorConnection, graphModel);
      });
--- a/packages/noodl-runtime/src/nodes/std-library/datetostring.js
+++ b/packages/noodl-runtime/src/nodes/std-library/datetostring.js
@@ -31,8 +31,6 @@ const DateToStringNode = {

        this._internal.currentInput = _value;
        this._format();
-        this.flagOutputDirty('currentValue');
-        this.sendSignalOnOutput('inputChanged');
      }
    }
  },
@@ -49,30 +47,45 @@ const DateToStringNode = {
      type: 'signal',
      displayName: 'Date Changed',
      group: 'Signals'
+    },
+    onError: {
+      type: 'signal',
+      displayName: 'Invalid Date',
+      group: 'Signals'
    }
  },
  methods: {
    _format() {
-      const t = this._internal.currentInput;
-      const format = this._internal.formatString;
-      const date = ('0' + t.getDate()).slice(-2);
-      const month = ('0' + (t.getMonth() + 1)).slice(-2);
-      const monthShort = new Intl.DateTimeFormat('en-US', { month: 'short' }).format(t);
-      const year = t.getFullYear();
-      const yearShort = year.toString().substring(2);
-      const hours = ('0' + t.getHours()).slice(-2);
-      const minutes = ('0' + t.getMinutes()).slice(-2);
-      const seconds = ('0' + t.getSeconds()).slice(-2);
+      try {
+        const t = this._internal.currentInput;
+        const format = this._internal.formatString;
+        const date = ('0' + t.getDate()).slice(-2);
+        const month = ('0' + (t.getMonth() + 1)).slice(-2);
+        const monthShort = new Intl.DateTimeFormat('en-US', { month: 'short' }).format(t);
+        const year = t.getFullYear();
+        const yearShort = year.toString().substring(2);
+        const hours = ('0' + t.getHours()).slice(-2);
+        const minutes = ('0' + t.getMinutes()).slice(-2);
+        const seconds = ('0' + t.getSeconds()).slice(-2);

-      this._internal.dateString = format
-        .replace(/\{date\}/g, date)
-        .replace(/\{month\}/g, month)
-        .replace(/\{monthShort\}/g, monthShort)
-        .replace(/\{year\}/g, year)
-        .replace(/\{yearShort\}/g, yearShort)
-        .replace(/\{hours\}/g, hours)
-        .replace(/\{minutes\}/g, minutes)
-        .replace(/\{seconds\}/g, seconds);
+        this._internal.dateString = format
+          .replace(/\{date\}/g, date)
+          .replace(/\{month\}/g, month)
+          .replace(/\{monthShort\}/g, monthShort)
+          .replace(/\{year\}/g, year)
+          .replace(/\{yearShort\}/g, yearShort)
+          .replace(/\{hours\}/g, hours)
+          .replace(/\{minutes\}/g, minutes)
+          .replace(/\{seconds\}/g, seconds);
+      } catch (error) {
+        // Set the output to be blank, makes it easier to handle.
+        this._internal.dateString = '';
+        this.flagOutputDirty('onError');
+      }
+
+      // Flag that the value have changed
+      this.flagOutputDirty('currentValue');
+      this.sendSignalOnOutput('inputChanged');
    }
  }
 };
--- a/packages/noodl-runtime/src/nodes/std-library/stringformat.js
+++ b/packages/noodl-runtime/src/nodes/std-library/stringformat.js
@@ -2,6 +2,8 @@ const StringFormatDefinition = {
  name: 'String Format',
  docs: 'https://docs.noodl.net/nodes/string-manipulation/string-format',
  category: 'String Manipulation',
+  usePortAsLabel: 'format',
+  portLabelTruncationMode: 'length',
  initialize() {
    const internal = this._internal;
    internal.format = '';
--- a/packages/noodl-viewer-cloud/static/viewer/global.d.ts.keep
+++ b/packages/noodl-viewer-cloud/static/viewer/global.d.ts.keep
@@ -227,6 +227,9 @@ declare namespace Noodl {
      objectOrId: string | { getId(): string; },
      options?: {
        className?: RecordClassName;
+        keys?: string[] | string;
+        include?: string[] | string;
+        excludeKeys?: string[] | string;
      }
    ): Promise<any>;

--- a/packages/noodl-viewer-cloud/webpack-configs/constants.js
+++ b/packages/noodl-viewer-cloud/webpack-configs/constants.js
@@ -1,9 +1,9 @@
-const path = require('path');
-
-module.exports = {
-  // Allows to define the output path of the files built by the viewer.
-  //
-  // For example in the CLI, we will also build this, just with a different output path.
-  outPath: process.env.OUT_PATH || path.resolve(__dirname, '../../noodl-editor/src/external'),
-  runtimeVersion: 'cloud-runtime-' + require('../package.json').version.replaceAll('.', '-')
-};
+const path = require('path');
+
+module.exports = {
+  // Allows to define the output path of the files built by the viewer.
+  //
+  // For example in the CLI, we will also build this, just with a different output path.
+  outPath: process.env.OUT_PATH || path.resolve(__dirname, '../../noodl-editor/src/external'),
+  runtimeVersion: 'cloud-runtime-' + require('../package.json').version.replaceAll('.', '-')
+};
--- a/packages/noodl-viewer-cloud/webpack-configs/webpack.viewer.dev.js
+++ b/packages/noodl-viewer-cloud/webpack-configs/webpack.viewer.dev.js
@@ -1,8 +1,8 @@
-const { merge } = require("webpack-merge");
-const common = require("./webpack.viewer.common.js");
+const { merge } = require('webpack-merge');
+const common = require('./webpack.viewer.common.js');

 module.exports = merge(common, {
-  mode: "development",
-  devtool: "inline-source-map",
-  watch: true,
+  mode: 'development',
+  devtool: 'inline-source-map',
+  watch: true
 });
--- a/packages/noodl-viewer-cloud/webpack-configs/webpack.viewer.prod.js
+++ b/packages/noodl-viewer-cloud/webpack-configs/webpack.viewer.prod.js
@@ -2,5 +2,6 @@ const { merge } = require('webpack-merge');
 const common = require('./webpack.viewer.common.js');

 module.exports = merge(common, {
-  mode: 'production'
+  mode: 'production',
+  devtool: 'source-map'
 });
--- a/packages/noodl-viewer-react/src/api/navigation.js
+++ b/packages/noodl-viewer-react/src/api/navigation.js
@@ -2,12 +2,18 @@ const { RouterHandler } = require('../nodes/navigation/router-handler');
 const NoodlRuntime = require('@noodl/runtime');

 const navigation = {
+  /**
+   * This is set by "packages/noodl-viewer-react/src/noodl-js-api.js"
+   * @type {NoodlRuntime}
+   */
+  _noodlRuntime: undefined,
+
  async showPopup(componentPath, params) {
    return new Promise((resolve) => {
      navigation._noodlRuntime.context.showPopup(componentPath, params, {
        onClosePopup: (action, results) => {
          resolve({
-            action: action.replace('closeAction-', ''),
+            action: action?.replace('closeAction-', ''),
            parameters: results
          });
        }
--- a/packages/noodl-viewer-react/src/components/controls/Button/Button.tsx
+++ b/packages/noodl-viewer-react/src/components/controls/Button/Button.tsx
@@ -7,6 +7,8 @@ import { Noodl, Slot } from '../../../types';
 export interface ButtonProps extends Noodl.ReactProps {
  enabled: boolean;
  buttonType: 'button' | 'submit';
+  
+  attrs: React.Attributes;

  textStyle: Noodl.TextStyle;

@@ -96,6 +98,7 @@ export function Button(props: ButtonProps) {

  return (
    <button
+      {...props.attrs}
      className={className}
      disabled={!props.enabled}
      {...Utils.controlEvents(props)}
--- a/packages/noodl-viewer-react/src/components/controls/Checkbox/Checkbox.tsx
+++ b/packages/noodl-viewer-react/src/components/controls/Checkbox/Checkbox.tsx
@@ -9,6 +9,8 @@ export interface CheckboxProps extends Noodl.ReactProps {
  enabled: boolean;
  checked: boolean;

+  attrs: React.Attributes;
+
  useLabel: boolean;
  label: string;
  labelSpacing: string;
@@ -47,6 +49,7 @@ export function Checkbox(props: CheckboxProps) {
  Layout.align(style, props);

  const inputProps = {
+    ...props.attrs,
    id: props.id,
    className: [props.className, 'ndl-controls-checkbox-2'].join(' '),
    disabled: !props.enabled,
--- a/packages/noodl-viewer-react/src/components/controls/RadioButton/RadioButton.tsx
+++ b/packages/noodl-viewer-react/src/components/controls/RadioButton/RadioButton.tsx
@@ -10,6 +10,8 @@ export interface RadioButtonProps extends Noodl.ReactProps {
  enabled: boolean;
  value: string;

+  attrs: React.Attributes;
+
  useLabel: boolean;
  label: string;
  labelSpacing: string;
@@ -47,6 +49,7 @@ export function RadioButton(props: RadioButtonProps) {
  props.checkedChanged && props.checkedChanged(radioButtonGroup ? radioButtonGroup.selected === props.value : false);

  const inputProps = {
+    ...props.attrs,
    id: props.id,
    disabled: !props.enabled,
    className: [props.className, 'ndl-controls-radio-2'].join(' '),
--- a/packages/noodl-viewer-react/src/components/controls/Select/Select.tsx
+++ b/packages/noodl-viewer-react/src/components/controls/Select/Select.tsx
@@ -12,6 +12,8 @@ export interface SelectProps extends Noodl.ReactProps {
  textStyle: Noodl.TextStyle;
  items: TSFixme;

+  attrs: React.Attributes;
+
  placeholder: string;
  placeholderOpacity: string;

@@ -81,6 +83,7 @@ export function Select(props: SelectProps) {
  }

  const inputProps = {
+    ...props.attrs,
    id: props.id,
    className: props.className,
    style: {
--- a/packages/noodl-viewer-react/src/components/controls/Slider/Slider.tsx
+++ b/packages/noodl-viewer-react/src/components/controls/Slider/Slider.tsx
@@ -9,6 +9,8 @@ export interface SliderProps extends Noodl.ReactProps {
  id: string;
  enabled: boolean;

+  attrs: React.Attributes;
+
  value: number;
  min: number;
  max: number;
@@ -103,6 +105,7 @@ export function Slider(props: SliderProps) {
  const className = `ndl-controls-range2 ${instanceClassId} ${props.className ? props.className : ''} `;

  const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
+    ...props.attrs,
    id: props.id,
    style: {
      width: '100%',
--- a/packages/noodl-viewer-react/src/components/controls/TextInput/TextInput.tsx
+++ b/packages/noodl-viewer-react/src/components/controls/TextInput/TextInput.tsx
@@ -17,6 +17,8 @@ export interface TextInputProps extends Noodl.ReactProps {
  type: 'text' | 'textArea' | 'email' | 'number' | 'password' | 'url';
  textStyle: Noodl.TextStyle;

+  attrs: React.Attributes;
+
  enabled: boolean;

  placeholder: string;
@@ -149,6 +151,7 @@ export class TextInput extends React.Component<TextInputProps, State> {
    inputStyles.color = props.noodlNode.context.styles.resolveColor(inputStyles.color);

    const inputProps = {
+      ...props.attrs,
      id: props.id,
      value: this.state.value,
      ...Utils.controlEvents(props),
--- a/packages/noodl-viewer-react/src/components/visual/Columns/Columns.tsx
+++ b/packages/noodl-viewer-react/src/components/visual/Columns/Columns.tsx
@@ -7,6 +7,8 @@ export interface ColumnsProps extends Noodl.ReactProps {
  marginX: string;
  marginY: string;

+  attrs: React.Attributes;
+
  justifyContent: 'flex-start' | 'flex-end' | 'center';
  direction: 'row' | 'column';
  minWidth: string;
@@ -115,7 +117,10 @@ export function Columns(props: ColumnsProps) {

  // ForEachCompoent breaks the layout but is needed to send onMount/onUnmount
  if (!Array.isArray(props.children)) {
-    children = [props.children];
+    // @ts-expect-error props.children.type is any
+    if (props.children.type !== ForEachComponent) {
+      children = [props.children]
+    }
  } else {
    children = props.children.filter((child) => child.type !== ForEachComponent);
    forEachComponent = props.children.find((child) => child.type === ForEachComponent);
@@ -123,9 +128,11 @@ export function Columns(props: ColumnsProps) {

  return (
    <div
+      {...props.attrs}
      className={['columns-container', props.className].join(' ')}
      ref={containerRef}
      style={{
+        visibility: containerWidth === null ? "hidden" : "visible",
        marginTop: parseFloat(props.marginY) * -1,
        marginLeft: parseFloat(props.marginX) * -1,
        display: 'flex',
--- a/packages/noodl-viewer-react/src/components/visual/Group/Group.tsx
+++ b/packages/noodl-viewer-react/src/components/visual/Group/Group.tsx
@@ -19,6 +19,8 @@ BScroll.use(Slide);
 export interface GroupProps extends Noodl.ReactProps {
  as?: keyof JSX.IntrinsicElements | React.ComponentType<unknown>;

+  attrs: React.Attributes;
+
  scrollSnapEnabled: boolean;
  showScrollbar: boolean;
  scrollEnabled: boolean;
@@ -271,6 +273,7 @@ export class Group extends React.Component<GroupProps> {
      <Component
        // @ts-expect-error Lets hope that the type passed here is always static!
        className={props.className}
+        {...props.attrs}
        {...props.dom}
        {...PointerListeners(props)}
        style={style}
--- a/packages/noodl-viewer-react/src/components/visual/Image/Image.tsx
+++ b/packages/noodl-viewer-react/src/components/visual/Image/Image.tsx
@@ -10,6 +10,7 @@ export interface ImageProps extends Noodl.ReactProps {
    src: string;
    onLoad?: () => void;
  };
+  attrs: React.Attributes;
 }

 export function Image(props: ImageProps) {
@@ -30,5 +31,5 @@ export function Image(props: ImageProps) {
    }
  }

-  return <img className={props.className} {...props.dom} {...PointerListeners(props)} style={style} />;
+  return <img {...props.attrs} className={props.className} {...props.dom} {...PointerListeners(props)} style={style} />;
 }
--- a/packages/noodl-viewer-react/src/components/visual/Text/Text.tsx
+++ b/packages/noodl-viewer-react/src/components/visual/Text/Text.tsx
@@ -7,6 +7,8 @@ import { Noodl } from '../../../types';
 export interface TextProps extends Noodl.ReactProps {
  as?: keyof JSX.IntrinsicElements | React.ComponentType<unknown>;

+  attrs: React.Attributes;
+
  textStyle: Noodl.TextStyle;
  text: string;

@@ -48,6 +50,7 @@ export function Text(props: TextProps) {
  return (
    <Component
      className={['ndl-visual-text', props.className].join(' ')}
+      {...props.attrs}
      {...props.dom}
      {...PointerListeners(props)}
      style={style}
--- a/packages/noodl-viewer-react/src/nodes-deprecated/std-library/data/variablenode.js
+++ b/packages/noodl-viewer-react/src/nodes-deprecated/std-library/data/variablenode.js
@@ -1,10 +1,9 @@
 'use strict';

 const { Node } = require('@noodl/runtime');
+const Model = require('@noodl/runtime/src/model');

-var Model = require('@noodl/runtime/src/model');
-
-var VariableNodeDefinition = {
+const VariableNodeDefinition = {
  name: 'Variable',
  docs: 'https://docs.noodl.net/nodes/data/variable',
  category: 'Data',
--- a/packages/noodl-viewer-react/src/nodes/controls/button.ts
+++ b/packages/noodl-viewer-react/src/nodes/controls/button.ts
@@ -30,11 +30,24 @@ const ButtonNode = {
    ]
  },
  initialize() {
+    this.props.attrs = {};
    this.props.layout = 'row'; //Used to tell child nodes what layout to expect
  },
  getReactComponent() {
    return Button;
  },
+  inputs: {
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
+    }
+  },
  inputCss: {
    backgroundColor: {
      index: 100,
--- a/packages/noodl-viewer-react/src/nodes/controls/checkbox.ts
+++ b/packages/noodl-viewer-react/src/nodes/controls/checkbox.ts
@@ -31,6 +31,7 @@ const CheckBoxNode = {
    ]
  },
  initialize() {
+    this.props.attrs = {};
    this.props.sizeMode = 'explicit';
    this.props.id = 'input-' + guid();
    this.props.checked = this._internal.checked = false;
@@ -94,6 +95,16 @@ const CheckBoxNode = {
        this.flagOutputDirty('checked');
        this._updateVisualState();
      }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
    }
  },
  inputCss: {
--- a/packages/noodl-viewer-react/src/nodes/controls/options.ts
+++ b/packages/noodl-viewer-react/src/nodes/controls/options.ts
@@ -31,6 +31,7 @@ const OptionsNode = {
    ]
  },
  initialize: function () {
+    this.props.attrs = {};
    this._itemsChanged = () => {
      this.forceUpdate();
    };
@@ -90,6 +91,16 @@ const OptionsNode = {
          this.flagOutputDirty('value');
        }
      }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
    }
  },
  inputProps: {
--- a/packages/noodl-viewer-react/src/nodes/controls/radiobutton.ts
+++ b/packages/noodl-viewer-react/src/nodes/controls/radiobutton.ts
@@ -31,6 +31,7 @@ const RadioButtonNode = {
    ]
  },
  initialize() {
+    this.props.attrs = {};
    this.props.sizeMode = 'explicit';
    this.props.id = 'input-' + guid();

@@ -61,6 +62,16 @@ const RadioButtonNode = {
      set(value) {
        this.setStyle({ backgroundColor: value }, 'fill');
      }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
    }
  },
  inputProps: {
--- a/packages/noodl-viewer-react/src/nodes/controls/slider.ts
+++ b/packages/noodl-viewer-react/src/nodes/controls/slider.ts
@@ -27,6 +27,7 @@ const RangeNode = {
    ]
  },
  initialize() {
+    this.props.attrs = {};
    this.props.sizeMode = 'contentHeight';
    this.props.id = 'input-' + guid();

@@ -67,6 +68,16 @@ const RangeNode = {
      set(value) {
        this._setInputValue(value);
      }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
    }
  },
  outputs: {
--- a/packages/noodl-viewer-react/src/nodes/controls/text-input.ts
+++ b/packages/noodl-viewer-react/src/nodes/controls/text-input.ts
@@ -43,6 +43,7 @@ const TextInputNode = {
    return TextInput;
  },
  initialize() {
+    this.props.attrs = {};
    this.props.startValue = '';
    this.props.id = this._internal.controlId = 'input-' + guid();
  },
@@ -167,6 +168,16 @@ const TextInputNode = {
            break;
        }
      }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
    }
  },
  inputCss: {
--- a/packages/noodl-viewer-react/src/nodes/navigation/closepopup.js
+++ b/packages/noodl-viewer-react/src/nodes/navigation/closepopup.js
@@ -40,8 +40,8 @@ const ClosePopupNode = {
      this._internal.closeCallback = cb;
    },
    scheduleClose: function () {
-      var _this = this;
-      var internal = this._internal;
+      const _this = this;
+      const internal = this._internal;
      if (!internal.hasScheduledClose) {
        internal.hasScheduledClose = true;
        this.scheduleAfterInputsHaveUpdated(function () {
@@ -51,8 +51,9 @@ const ClosePopupNode = {
      }
    },
    close: function () {
-      if (this._internal.closeCallback)
+      if (this._internal.closeCallback) {
        this._internal.closeCallback(this._internal.closeAction, this._internal.resultValues);
+      }
    },
    closeActionTriggered: function (name) {
      this._internal.closeAction = name;
@@ -112,9 +113,8 @@ module.exports = {
        var closeActions = node.parameters['closeActions'];
        if (closeActions) {
          closeActions = closeActions ? closeActions.split(',') : undefined;
-          for (var i in closeActions) {
-            var p = closeActions[i];
-
+          for (const i in closeActions) {
+            const p = closeActions[i];
            ports.push({
              type: 'signal',
              plug: 'input',
--- a/packages/noodl-viewer-react/src/nodes/navigation/navigate.js
+++ b/packages/noodl-viewer-react/src/nodes/navigation/navigate.js
@@ -192,8 +192,7 @@ function setup(context, graphModel) {
              enums: pages.map((p) => ({
                label: p.label,
                value: p.id
-              })),
-              allowEditOnly: true
+              }))
            },
            group: 'General',
            displayName: 'Target Page',
--- a/packages/noodl-viewer-react/src/nodes/navigation/navigation-stack.jsx
+++ b/packages/noodl-viewer-react/src/nodes/navigation/navigation-stack.jsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import ASyncQueue from '../../async-queue';
 import { createNodeFromReactComponent } from '../../react-component-node';

@@ -75,10 +77,13 @@ const PageStack = {
    const info = [{ type: 'text', value: 'Active Components:' }];

    return info.concat(
-      this._internal.stack.map((p, i) => ({
-        type: 'text',
-        value: '- ' + this._internal.pages.find((pi) => pi.id === p.pageId).label
-      }))
+      this._internal.stack.map((p) => {
+        const pageInfo = this._findPage(p.pageId);
+        return {
+          type: 'text',
+          value: '- ' + pageInfo.label
+        };
+      })
    );
  },
  defaultCss: {
@@ -170,6 +175,7 @@ const PageStack = {
    topPageName: {
      type: 'string',
      displayName: 'Top Component Name',
+      group: 'General',
      get() {
        return this._internal.topPageName;
      }
@@ -177,6 +183,7 @@ const PageStack = {
    stackDepth: {
      type: 'number',
      displayName: 'Stack Depth',
+      group: 'General',
      get() {
        return this._internal.stackDepth;
      }
@@ -189,12 +196,31 @@ const PageStack = {
    _deregisterPageStack() {
      NavigationHandler.instance.deregisterPageStack(this._internal.name, this);
    },
-    _pageNameForId(id) {
-      if (this._internal.pages === undefined) return;
-      const page = this._internal.pages.find((p) => p.id === id);
-      if (page === undefined) return;
+    /**
+     * @param {String} pageIdOrLabel
+     */
+    _findPage(pageIdOrLabel) {
+      if (this._internal.pageInfo[pageIdOrLabel]) {
+        const pageInfo = this._internal.pageInfo[pageIdOrLabel];
+        const pageRef = this._internal.pages.find((x) => x.id === pageIdOrLabel);
+        return {
+          component: String(pageInfo.component),
+          label: String(pageRef.label),
+          id: String(pageIdOrLabel)
+        };
+      }

-      return page.label;
+      const pageRef = this._internal.pages.find((x) => x.label === pageIdOrLabel);
+      if (pageRef) {
+        const pageInfo = this._internal.pageInfo[pageRef.id];
+        return {
+          component: String(pageInfo.component),
+          label: String(pageRef.label),
+          id: String(pageRef.id)
+        };
+      }
+
+      return undefined;
    },
    setPageOutputs(outputs) {
      for (const prop in outputs) {
@@ -230,8 +256,9 @@ const PageStack = {

      if (this._internal.pages === undefined || this._internal.pages.length === 0) return;

-      var startPageId,
-        params = {};
+      let startPageId;
+      let params = {};
+
      var pageFromUrl = this.matchPageFromUrl();
      if (pageFromUrl !== undefined) {
        // We have an url matching a page, use that page as start page
@@ -239,13 +266,16 @@ const PageStack = {

        params = Object.assign({}, pageFromUrl.query, pageFromUrl.params);
      } else {
-        var startPageId = this._internal.startPageId;
+        startPageId = this._internal.startPageId;
        if (startPageId === undefined) startPageId = this._internal.pages[0].id;
      }

-      var pageInfo = this._internal.pageInfo[startPageId];
-
-      if (pageInfo === undefined || pageInfo.component === undefined) return; // No component specified for page
+      // Find the page by either ID or by Label
+      const pageInfo = this._findPage(startPageId);
+      if (pageInfo === undefined || pageInfo.component === undefined) {
+        // No page was found
+        return;
+      }

      var content = await this.nodeScope.createNode(pageInfo.component, guid());

@@ -269,7 +299,7 @@ const PageStack = {
      ];

      this.setPageOutputs({
-        topPageName: this._pageNameForId(startPageId),
+        topPageName: pageInfo.label,
        stackDepth: this._internal.stack.length
      });
    },
@@ -458,13 +488,22 @@ const PageStack = {
      this._internal.asyncQueue.enqueue(this.replaceAsync.bind(this, args));
    },
    async replaceAsync(args) {
-      if (this._internal.pages === undefined || this._internal.pages.length === 0) return;
+      if (this._internal.pages === undefined || this._internal.pages.length === 0) {
+        return;
+      }

-      if (this._internal.isTransitioning) return;
+      if (this._internal.isTransitioning) {
+        return;
+      }

-      var pageId = args.target || this._internal.pages[0].id;
-      var pageInfo = this._internal.pageInfo[pageId];
-      if (pageInfo === undefined || pageInfo.component === undefined) return; // No component specified for page
+      const pageId = args.target || this._internal.pages[0].id;
+
+      // Find the page by either ID or by Label
+      const pageInfo = this._findPage(pageId);
+      if (pageInfo === undefined || pageInfo.component === undefined) {
+        // No page was found
+        return;
+      }

      // Remove all current pages in the stack
      var children = this.getChildren();
@@ -498,7 +537,7 @@ const PageStack = {
      ];

      this.setPageOutputs({
-        topPageName: this._pageNameForId(pageId),
+        topPageName: pageInfo.label,
        stackDepth: this._internal.stack.length
      });

@@ -510,13 +549,22 @@ const PageStack = {
      this._internal.asyncQueue.enqueue(this.navigateAsync.bind(this, args));
    },
    async navigateAsync(args) {
-      if (this._internal.pages === undefined || this._internal.pages.length === 0) return;
+      if (this._internal.pages === undefined || this._internal.pages.length === 0) {
+        return;
+      }

-      if (this._internal.isTransitioning) return;
+      if (this._internal.isTransitioning) {
+        return;
+      }

-      var pageId = args.target || this._internal.pages[0].id;
-      var pageInfo = this._internal.pageInfo[pageId];
-      if (pageInfo === undefined || pageInfo.component === undefined) return; // No component specified for page
+      const pageId = args.target || this._internal.pages[0].id;
+
+      // Find the page by either ID or by Label
+      const pageInfo = this._findPage(pageId);
+      if (pageInfo === undefined || pageInfo.component === undefined) {
+        // No page was found
+        return;
+      }

      // Create the container group
      const group = this.createPageContainer();
@@ -530,7 +578,7 @@ const PageStack = {
      group.addChild(content);

      // Connect navigate back nodes
-      var navigateBackNodes = content.nodeScope.getNodesWithType('PageStackNavigateBack');
+      const navigateBackNodes = content.nodeScope.getNodesWithType('PageStackNavigateBack');
      if (navigateBackNodes && navigateBackNodes.length > 0) {
        for (var j = 0; j < navigateBackNodes.length; j++) {
          navigateBackNodes[j]._setBackCallback(this.back.bind(this));
@@ -538,8 +586,8 @@ const PageStack = {
      }

      // Push the new top
-      var top = this._internal.stack[this._internal.stack.length - 1];
-      var newTop = {
+      const top = this._internal.stack[this._internal.stack.length - 1];
+      const newTop = {
        from: top.page,
        page: group,
        pageInfo: pageInfo,
@@ -551,7 +599,7 @@ const PageStack = {
      };
      this._internal.stack.push(newTop);
      this.setPageOutputs({
-        topPageName: this._pageNameForId(args.target),
+        topPageName: pageInfo.label,
        stackDepth: this._internal.stack.length
      });
      this._updateUrlWithTopPage();
@@ -584,8 +632,11 @@ const PageStack = {
      this.addChild(top.from, 0);
      top.backCallback && top.backCallback(args.backAction, args.results);

+      // Find the page by either ID or by Label
+      const pageInfo = this._findPage(this._internal.stack[this._internal.stack.length - 2].pageId);
+
      this.setPageOutputs({
-        topPageName: this._pageNameForId(this._internal.stack[this._internal.stack.length - 2].pageId),
+        topPageName: pageInfo.label,
        stackDepth: this._internal.stack.length - 1
      });

--- a/packages/noodl-viewer-react/src/nodes/navigation/showpopup.js
+++ b/packages/noodl-viewer-react/src/nodes/navigation/showpopup.js
@@ -53,15 +53,24 @@ const ShowPopupNode = {

      this.context.showPopup(this._internal.target, this._internal.popupParams, {
        senderNode: this.nodeScope.componentOwner,
+        /**
+         * @param {string | undefined} action
+         * @param {*} results
+         */
        onClosePopup: (action, results) => {
          this._internal.closeResults = results;

-          for (var key in results) {
-            if (this.hasOutput('closeResult-' + key)) this.flagOutputDirty('closeResult-' + key);
+          for (const key in results) {
+            if (this.hasOutput('closeResult-' + key)) {
+              this.flagOutputDirty('closeResult-' + key);
+            }
          }

-          if (!action) this.sendSignalOnOutput('Closed');
-          else this.sendSignalOnOutput(action);
+          if (!action) {
+            this.sendSignalOnOutput('Closed');
+          } else {
+            this.sendSignalOnOutput(action);
+          }
        }
      });
    },
--- a/packages/noodl-viewer-react/src/nodes/std-library/data/collectionnode2.js
+++ b/packages/noodl-viewer-react/src/nodes/std-library/data/collectionnode2.js
@@ -2,8 +2,7 @@

 const { Node } = require('@noodl/runtime');

-var Model = require('@noodl/runtime/src/model'),
-  Collection = require('@noodl/runtime/src/collection');
+const Collection = require('@noodl/runtime/src/collection');

 var CollectionNode = {
  name: 'Collection2',
@@ -27,6 +26,7 @@ var CollectionNode = {

      _this.scheduleAfterInputsHaveUpdated(function () {
        _this.sendSignalOnOutput('changed');
+        _this.flagOutputDirty('firstItemId');
        _this.flagOutputDirty('count');
        collectionChangedScheduled = false;
      });
@@ -117,6 +117,17 @@ var CollectionNode = {
        return this._internal.collection;
      }
    },
+    firstItemId: {
+      type: 'string',
+      displayName: 'First Item Id',
+      group: 'General',
+      getter: function () {
+        if (this._internal.collection) {
+          var firstItem = this._internal.collection.get(0);
+          if (firstItem !== undefined) return firstItem.getId();
+        }
+      }
+    },
    count: {
      type: 'number',
      displayName: 'Count',
@@ -150,6 +161,7 @@ var CollectionNode = {
      collection.on('change', this._internal.collectionChangedCallback);

      this.flagOutputDirty('items');
+      this.flagOutputDirty('firstItemId');
      this.flagOutputDirty('count');
    },
    setSourceCollection: function (collection) {
--- a/packages/noodl-viewer-react/src/nodes/std-library/data/setvariablenode.js
+++ b/packages/noodl-viewer-react/src/nodes/std-library/data/setvariablenode.js
@@ -1,21 +1,25 @@
 'use strict';

-const { Node } = require('@noodl/runtime');
-
 const Model = require('@noodl/runtime/src/model');
 const Collection = require('@noodl/runtime/src/collection');

-var SetVariableNodeDefinition = {
+const SetVariableNodeDefinition = {
  name: 'Set Variable',
  docs: 'https://docs.noodl.net/nodes/data/variable/set-variable',
  category: 'Data',
  usePortAsLabel: 'name',
  color: 'data',
  initialize: function () {
-    var internal = this._internal;
-
+    const internal = this._internal;
    internal.variablesModel = Model.get('--ndl--global-variables');
  },
+  getInspectInfo() {
+    if (this._internal.name) {
+      return this._internal.variablesModel.get(this._internal.name);
+    }
+
+    return '[No value set]';
+  },
  outputs: {
    done: {
      type: 'signal',
@@ -74,17 +78,22 @@ var SetVariableNodeDefinition = {
      if (this.hasScheduledStore) return;
      this.hasScheduledStore = true;

-      var internal = this._internal;
+      const internal = this._internal;
      this.scheduleAfterInputsHaveUpdated(function () {
        this.hasScheduledStore = false;

-        var value = internal.setWith === 'emptyString' ? '' : internal.value;
+        let value = internal.setWith === 'emptyString' ? '' : internal.value;
+
+        // Can set arrays with "id" or array
+        if (internal.setWith === 'object' && typeof value === 'string') value = Model.get(value);
+
+        // Can set arrays with "id" or array
+        if (internal.setWith === 'array' && typeof value === 'string') value = Collection.get(value);

-        if (internal.setWith === 'object' && typeof value === 'string') value = Model.get(value); // Can set arrays with "id" or array
-        if (internal.setWith === 'array' && typeof value === 'string') value = Collection.get(value); // Can set arrays with "id" or array
        if (internal.setWith === 'boolean') value = !!value;

-        //use forceChange to always trigger Variable nodes to send the value on their output, even if it's the same value twice
+        // use forceChange to always trigger Variable nodes to send the value on
+        // their output, even if it's the same value twice
        internal.variablesModel.set(internal.name, value, {
          forceChange: true
        });
@@ -96,10 +105,11 @@ var SetVariableNodeDefinition = {
        return;
      }

-      if (name === 'value')
+      if (name === 'value') {
        this.registerInput(name, {
          set: this.setValue.bind(this)
        });
+      }
    }
  }
 };
--- a/packages/noodl-viewer-react/src/nodes/std-library/openfilepicker.js
+++ b/packages/noodl-viewer-react/src/nodes/std-library/openfilepicker.js
@@ -43,6 +43,10 @@ const OpenFilePicker = {

        input.accept = this._internal.acceptedFileTypes;

+        if (this._internal.capture) {
+          input.capture = this._internal.capture;
+        }
+
        input.onchange = onChange;
        input.click();
      }
@@ -54,6 +58,14 @@ const OpenFilePicker = {
      set(value) {
        this._internal.acceptedFileTypes = value;
      }
+    },
+    capture: {
+      group: 'General',
+      type: 'string',
+      displayName: 'Capture',
+      set(value) {
+        this._internal.capture = value;
+      }
    }
  },
  outputs: {
--- a/packages/noodl-viewer-react/src/nodes/std-library/switch.js
+++ b/packages/noodl-viewer-react/src/nodes/std-library/switch.js
@@ -4,7 +4,7 @@ const Switch = {
  name: 'Switch',
  docs: 'https://docs.noodl.net/nodes/logic/switch',
  category: 'Logic',
-  initialize: function () {
+  initialize() {
    this._internal.state = false;
    this._internal.initialized = false;
  },
@@ -15,7 +15,7 @@ const Switch = {
    on: {
      displayName: 'On',
      group: 'Change State',
-      valueChangedToTrue: function () {
+      valueChangedToTrue() {
        if (this._internal.state === true) {
          return;
        }
@@ -27,7 +27,7 @@ const Switch = {
    off: {
      displayName: 'Off',
      group: 'Change State',
-      valueChangedToTrue: function () {
+      valueChangedToTrue() {
        if (this._internal.state === false) {
          return;
        }
@@ -39,7 +39,7 @@ const Switch = {
    flip: {
      displayName: 'Flip',
      group: 'Change State',
-      valueChangedToTrue: function () {
+      valueChangedToTrue() {
        this._internal.state = !this._internal.state;
        this.flagOutputDirty('state');
        this.emitSignals();
@@ -50,7 +50,7 @@ const Switch = {
      displayName: 'State',
      group: 'General',
      default: false,
-      set: function (value) {
+      set(value) {
        this._internal.state = !!value;
        this.flagOutputDirty('state');
        this.emitSignals();
@@ -61,10 +61,15 @@ const Switch = {
    state: {
      type: 'boolean',
      displayName: 'Current State',
-      getter: function () {
+      getter() {
        return this._internal.state;
      }
    },
+    switched: {
+      displayName: 'Switched',
+      type: 'signal',
+      group: 'Signals'
+    },
    switchedToOn: {
      displayName: 'Switched To On',
      type: 'signal',
@@ -77,12 +82,13 @@ const Switch = {
    }
  },
  prototypeExtensions: {
-    emitSignals: function () {
+    emitSignals() {
      if (this._internal.state === true) {
        this.sendSignalOnOutput('switchedToOn');
      } else {
        this.sendSignalOnOutput('switchedToOff');
      }
+      this.sendSignalOnOutput('switched');
    }
  }
 };
--- a/packages/noodl-viewer-react/src/nodes/std-library/user/login.js
+++ b/packages/noodl-viewer-react/src/nodes/std-library/user/login.js
@@ -1,18 +1,13 @@
 'use strict';

-const { Node, EdgeTriggeredInput } = require('@noodl/runtime');
 const UserService = require('./userservice');

-var LoginNodeDefinition = {
+const LoginNodeDefinition = {
  name: 'net.noodl.user.LogIn',
  docs: 'https://docs.noodl.net/nodes/data/user/log-in',
  displayNodeName: 'Log In',
  category: 'Cloud Services',
  color: 'data',
-  initialize: function () {
-    var internal = this._internal;
-  },
-  getInspectInfo() {},
  outputs: {
    success: {
      type: 'signal',
@@ -28,7 +23,7 @@ var LoginNodeDefinition = {
      type: 'string',
      displayName: 'Error',
      group: 'Error',
-      getter: function () {
+      getter() {
        return this._internal.error;
      }
    }
@@ -37,7 +32,7 @@ var LoginNodeDefinition = {
    login: {
      displayName: 'Do',
      group: 'Actions',
-      valueChangedToTrue: function () {
+      valueChangedToTrue() {
        this.scheduleLogIn();
      }
    },
@@ -45,7 +40,7 @@ var LoginNodeDefinition = {
      displayName: 'Username',
      type: 'string',
      group: 'General',
-      set: function (value) {
+      set(value) {
        this._internal.username = value;
      }
    },
@@ -53,13 +48,13 @@ var LoginNodeDefinition = {
      displayName: 'Password',
      type: 'string',
      group: 'General',
-      set: function (value) {
+      set(value) {
        this._internal.password = value;
      }
    }
  },
  methods: {
-    setError: function (err) {
+    setError(err) {
      this._internal.error = err;
      this.flagOutputDirty('error');
      this.sendSignalOnOutput('failure');
@@ -76,9 +71,7 @@ var LoginNodeDefinition = {
        this.context.editorConnection.clearWarning(this.nodeScope.componentOwner.name, this.id, 'user-login-warning');
      }
    },
-    scheduleLogIn: function () {
-      const internal = this._internal;
-
+    scheduleLogIn() {
      if (this.logInScheduled === true) return;
      this.logInScheduled = true;

@@ -100,89 +93,7 @@ var LoginNodeDefinition = {
  }
 };

-/*function updatePorts(nodeId, parameters, editorConnection, dbCollections) {
-    var ports = [];
-
-    ports.push({
-        name: 'collectionName',
-        displayName: "Class",
-        group: "General",
-        type: { name: 'enum', enums: (dbCollections !== undefined) ? dbCollections.map((c) => { return { value: c.name, label: c.name } }) : [], allowEditOnly: true },
-        plug: 'input'
-    })
-
-    if (parameters.collectionName && dbCollections) {
-        // Fetch ports from collection keys
-        var c = dbCollections.find((c) => c.name === parameters.collectionName);
-        if (c && c.schema && c.schema.properties) {
-            var props = c.schema.properties;
-            for (var key in props) {
-                var p = props[key];
-                if (ports.find((_p) => _p.name === key)) continue;
-
-                if(p.type === 'Relation') { 
-                    
-                }
-                else { // Other schema type ports
-                    const _typeMap = {
-                        "String":"string",
-                        "Boolean":"boolean",
-                        "Number":"number",
-                        "Date":"date"
-                    }
-
-                    ports.push({
-                        type: {
-                            name: _typeMap[p.type]?_typeMap[p.type]:'*',
-                        },
-                        plug: 'output',
-                        group: 'Properties',
-                        name: 'prop-' + key,
-                        displayName: key,
-                    })
-
-                    ports.push({
-                        type: 'signal',
-                        plug: 'output',
-                        group: 'Changed Events',
-                        displayName: key+ ' Changed',
-                        name: 'changed-' + key,
-                    })
-                }
-            }
-        }
-    }
-
-     editorConnection.sendDynamicPorts(nodeId, ports);
-}*/
-
 module.exports = {
  node: LoginNodeDefinition,
-  setup: function (context, graphModel) {
-    /* if (!context.editorConnection || !context.editorConnection.isRunningLocally()) {
-            return;
-        }
-
-        function _managePortsForNode(node) {
-            updatePorts(node.id, node.parameters, context.editorConnection, graphModel.getMetaData('dbCollections'));
-
-            node.on("parameterUpdated", function (event) {
-                updatePorts(node.id, node.parameters, context.editorConnection, graphModel.getMetaData('dbCollections'));
-            });
-
-            graphModel.on('metadataChanged.dbCollections', function (data) {
-                updatePorts(node.id, node.parameters, context.editorConnection, data);
-            })
-        }
-
-        graphModel.on("editorImportComplete", ()=> {
-            graphModel.on("nodeAdded.DbModel2", function (node) {
-				_managePortsForNode(node)
-			})
-
-			for(const node of graphModel.getNodesWithType('DbModel2')) {
-				_managePortsForNode(node)
-			}
-        })*/
-  }
+  setup(_context, _graphModel) {}
 };
--- a/packages/noodl-viewer-react/src/nodes/std-library/user/logout.js
+++ b/packages/noodl-viewer-react/src/nodes/std-library/user/logout.js
@@ -1,18 +1,13 @@
 'use strict';

-const { Node, EdgeTriggeredInput } = require('@noodl/runtime');
 const UserService = require('./userservice');

-var LogOutNodeDefinition = {
+const LogOutNodeDefinition = {
  name: 'net.noodl.user.LogOut',
  docs: 'https://docs.noodl.net/nodes/data/user/log-out',
  displayNodeName: 'Log Out',
  category: 'Cloud Services',
  color: 'data',
-  initialize: function () {
-    var internal = this._internal;
-  },
-  getInspectInfo() {},
  outputs: {
    success: {
      type: 'signal',
@@ -28,7 +23,7 @@ var LogOutNodeDefinition = {
      type: 'string',
      displayName: 'Error',
      group: 'Error',
-      getter: function () {
+      getter() {
        return this._internal.error;
      }
    }
@@ -37,13 +32,13 @@ var LogOutNodeDefinition = {
    login: {
      displayName: 'Do',
      group: 'Actions',
-      valueChangedToTrue: function () {
+      valueChangedToTrue() {
        this.scheduleLogOut();
      }
    }
  },
  methods: {
-    setError: function (err) {
+    setError(err) {
      this._internal.error = err;
      this.flagOutputDirty('error');
      this.sendSignalOnOutput('failure');
@@ -60,9 +55,7 @@ var LogOutNodeDefinition = {
        this.context.editorConnection.clearWarning(this.nodeScope.componentOwner.name, this.id, 'user-login-warning');
      }
    },
-    scheduleLogOut: function () {
-      const internal = this._internal;
-
+    scheduleLogOut() {
      if (this.logOutScheduled === true) return;
      this.logOutScheduled = true;

@@ -84,5 +77,5 @@ var LogOutNodeDefinition = {

 module.exports = {
  node: LogOutNodeDefinition,
-  setup: function (context, graphModel) {}
+  setup(_context, _graphModel) {}
 };
--- a/packages/noodl-viewer-react/src/nodes/std-library/user/signup.js
+++ b/packages/noodl-viewer-react/src/nodes/std-library/user/signup.js
@@ -1,20 +1,17 @@
 'use strict';

-const { Node, EdgeTriggeredInput } = require('@noodl/runtime');
 const UserService = require('./userservice');

-var SignUpNodeDefinition = {
+const SignUpNodeDefinition = {
  name: 'net.noodl.user.SignUp',
  docs: 'https://docs.noodl.net/nodes/data/user/sign-up',
  displayNodeName: 'Sign Up',
  category: 'Cloud Services',
  color: 'data',
-  initialize: function () {
-    var internal = this._internal;
-
+  initialize() {
+    const internal = this._internal;
    internal.userProperties = {};
  },
-  getInspectInfo() {},
  outputs: {
    success: {
      type: 'signal',
@@ -30,7 +27,7 @@ var SignUpNodeDefinition = {
      type: 'string',
      displayName: 'Error',
      group: 'Error',
-      getter: function () {
+      getter() {
        return this._internal.error;
      }
    }
@@ -39,7 +36,7 @@ var SignUpNodeDefinition = {
    signup: {
      displayName: 'Do',
      group: 'Actions',
-      valueChangedToTrue: function () {
+      valueChangedToTrue() {
        this.scheduleSignUp();
      }
    },
@@ -47,7 +44,7 @@ var SignUpNodeDefinition = {
      displayName: 'Username',
      type: 'string',
      group: 'General',
-      set: function (value) {
+      set(value) {
        this._internal.username = value;
      }
    },
@@ -55,7 +52,7 @@ var SignUpNodeDefinition = {
      displayName: 'Password',
      type: 'string',
      group: 'General',
-      set: function (value) {
+      set(value) {
        this._internal.password = value;
      }
    },
@@ -63,13 +60,13 @@ var SignUpNodeDefinition = {
      displayName: 'Email',
      type: 'string',
      group: 'General',
-      set: function (value) {
+      set(value) {
        this._internal.email = value;
      }
    }
  },
  methods: {
-    setError: function (err) {
+    setError(err) {
      this._internal.error = err;
      this.flagOutputDirty('error');
      this.sendSignalOnOutput('failure');
@@ -86,7 +83,7 @@ var SignUpNodeDefinition = {
        this.context.editorConnection.clearWarning(this.nodeScope.componentOwner.name, this.id, 'user-login-warning');
      }
    },
-    scheduleSignUp: function () {
+    scheduleSignUp() {
      const internal = this._internal;

      if (this.signUpScheduled === true) return;
@@ -109,23 +106,24 @@ var SignUpNodeDefinition = {
        });
      });
    },
-    setUserProperty: function (name, value) {
+    setUserProperty(name, value) {
      this._internal.userProperties[name] = value;
    },
-    registerInputIfNeeded: function (name) {
+    registerInputIfNeeded(name) {
      if (this.hasInput(name)) {
        return;
      }

-      if (name.startsWith('prop-'))
+      if (name.startsWith('prop-')) {
        return this.registerInput(name, {
          set: this.setUserProperty.bind(this, name.substring('prop-'.length))
        });
+      }
    }
  }
 };

-function updatePorts(nodeId, parameters, editorConnection, systemCollections) {
+function updatePorts(nodeId, _parameters, editorConnection, systemCollections) {
  var ports = [];

  if (systemCollections) {
@@ -169,7 +167,7 @@ function updatePorts(nodeId, parameters, editorConnection, systemCollections) {

 module.exports = {
  node: SignUpNodeDefinition,
-  setup: function (context, graphModel) {
+  setup(context, graphModel) {
    if (!context.editorConnection || !context.editorConnection.isRunningLocally()) {
      return;
    }
@@ -177,7 +175,7 @@ module.exports = {
    function _managePortsForNode(node) {
      updatePorts(node.id, node.parameters, context.editorConnection, graphModel.getMetaData('systemCollections'));

-      node.on('parameterUpdated', function (event) {
+      node.on('parameterUpdated', function (_event) {
        updatePorts(node.id, node.parameters, context.editorConnection, graphModel.getMetaData('systemCollections'));
      });

--- a/packages/noodl-viewer-react/src/nodes/visual/columns.js
+++ b/packages/noodl-viewer-react/src/nodes/visual/columns.js
@@ -23,7 +23,7 @@ const ColumnsNode = {
    ]
  },

-  initialize() {
+  initialize() {    this.props.attrs = {};
    this.props.layoutString = '1 2 1';
    this.props.minWidth = 0;
    this.props.marginX = 16;
@@ -62,6 +62,16 @@ const ColumnsNode = {
          );
        }

+        this.forceUpdate();
+      }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
        this.forceUpdate();
      }
    }
--- a/packages/noodl-viewer-react/src/nodes/visual/group.js
+++ b/packages/noodl-viewer-react/src/nodes/visual/group.js
@@ -11,6 +11,7 @@ const GroupNode = {
    groupPriority: ['General', 'Style', 'Events', 'Mounted', 'Hover Events', 'Pointer Events', 'Focus', 'Scroll']
  },
  initialize() {
+    this.props.attrs = {};
    this._internal = {
      scrollElementDuration: 500,
      scrollIndexDuration: 500,
@@ -143,6 +144,16 @@ const GroupNode = {
      valueChangedToTrue() {
        this.context.setNodeFocused(this, true);
      }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
    }
  },
  inputProps: {
--- a/packages/noodl-viewer-react/src/nodes/visual/image.js
+++ b/packages/noodl-viewer-react/src/nodes/visual/image.js
@@ -27,6 +27,7 @@ const ImageNode = {
    ]
  },
  initialize() {
+    this.props.attrs = {};
    this.props.default = '';
  },
  getReactComponent() {
@@ -86,6 +87,16 @@ const ImageNode = {
        this.props.dom.src = getAbsoluteUrl(url);
        this.forceUpdate();
      }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
    }
  },
  inputProps: {
@@ -114,6 +125,12 @@ const ImageNode = {
      propPath: 'dom',
      type: 'signal',
      group: 'Events'
+    },
+    onError: {
+      displayName: 'On Error',
+      propPath: 'dom',
+      type: 'signal',
+      group: 'Events'
    }
  }
 };
--- a/packages/noodl-viewer-react/src/nodes/visual/text.js
+++ b/packages/noodl-viewer-react/src/nodes/visual/text.js
@@ -20,6 +20,9 @@ const TextNode = {
  nodeDoubleClickAction: {
    focusPort: 'text'
  },
+  initialize() {
+    this.props.attrs = {};
+  },
  getReactComponent() {
    return Text;
  },
@@ -135,6 +138,16 @@ const TextNode = {
            break;
        }
      }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
    }
  }
 };
--- a/packages/noodl-viewer-react/static/deploy/index.json
+++ b/packages/noodl-viewer-react/static/deploy/index.json
@@ -4,6 +4,7 @@
  {"url":"noodl-app.png"},
  {"url":"load_terminator.js"},
  {"url":"noodl.deploy.js"},
+  {"url":"noodl.deploy.js.map"},
  {"url":"react.production.min.js"},
  {"url":"react-dom.production.min.js"}
-]
+]
--- a/packages/noodl-viewer-react/static/viewer/global.d.ts.keep
+++ b/packages/noodl-viewer-react/static/viewer/global.d.ts.keep
@@ -274,6 +274,9 @@ declare namespace Noodl {
      objectOrId: string | { getId(): string; },
      options?: {
        className?: RecordClassName;
+        keys?: string[] | string;
+        include?: string[] | string;
+        excludeKeys?: string[] | string;
      }
    ): Promise<any>;

@@ -482,7 +485,12 @@ declare namespace Noodl {
  const Records: RecordsApi;

  interface CurrentUserObject {
-    UserId: string;
+    id: string;
+    email: string;
+    emailVerified: boolean;
+    username: string;
+
+    Properties: unknown;

    /**
     * Log out the current user and terminate the session.
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Eric Tuvesson	b4ef346d25	chore: Combine search keybinding definitions	2024-11-18 17:50:41 +01:00
Eric Tuvesson	6205d08451	fix: showPopup replace error (#82 ) Error: "TypeError: Cannot read properties of undefined (reading 'replace')"	2024-11-18 17:06:10 +01:00
Eric Tuvesson	14786b2144	chore(runtime): Add some JSDocs (#81 )	2024-11-18 17:01:49 +01:00
Eric Tuvesson	e25155556f	feat(runtime): 'Set Variable' node, add editor getInspectInfo (#80 ) It is very nice to be able to inspect the value inside the variable even via the "Set Variable" node. Most of the time I see an additional variable node placed above the "Set Variable" node to just inspect the current value.	2024-11-13 13:35:03 +01:00
Eric Tuvesson	016837f466	feat(runtime): Add "keys" and "excludeKeys" to fetch record api (#79 ) Adding support for some more options when fetching a record. `91f9aca25b/src/Routers/ClassesRouter.js (L60-L68)`	2024-11-12 15:50:49 +01:00
Eric Tuvesson	fff03c05bf	fix(runtime): Close Popup node with no actions causing error (#78 ) TypeError: Cannot read properties of undefined (reading 'replace') at Object.onClosePopup (navigation.js:10:1) at EventEmitter.<anonymous> (nodecontext.js:491:1) at Object.onceWrapper (events.js:242:1) at EventEmitter.emit (events.js:153:1) at NoodlRuntime._doUpdate (noodl-runtime.js:338:1)	2024-10-03 11:24:57 +02:00
Eric Tuvesson	5dbb11bac8	chore: code clean up (#76 )	2024-10-01 16:09:03 +02:00
Eric Tuvesson	d80870e835	fix(runtime): Passing in invalid date to "Date To String" node causes node scope to fail (#75 )	2024-09-23 21:11:32 +02:00
Eric Tuvesson	a98e381f8c	fix: deploy in devmode (#74 ) This occurred because building in dev mode does not create the source map files which it expects to copy over.	2024-09-23 08:44:54 +02:00
Eric Tuvesson	72aec29e27	feat(runtime): Add "className" option support to "relatedTo" (#73 ) * feat(runtime): Add "className" option support to "relatedTo" Also includes error handling when "className" is not found.	2024-09-16 22:12:07 +02:00
Eric Tuvesson	2eb18acfef	fix(viewer-react): Update CurrentUserObject TS typings (#72 )	2024-09-11 16:15:02 +02:00
Eric Tuvesson	e1a1b31213	feat(viewer-react): Array, add "First Item Id" output (#71 ) Same behaviour as Query Record's "First Record Id"	2024-09-11 16:14:49 +02:00
Eric Tuvesson	5febc490b4	feat(runtime): Query Records, add "Is Empty" output (#70 )	2024-09-10 11:31:51 +02:00
Eric Tuvesson	48541347f0	fix(editor): Remove all the Cloud Triggers from the Cloud Function node Functions dropdown (#69 )	2024-09-09 17:35:08 +02:00
Eric Tuvesson	cc79ea5f7e	feat(viewer-react): Add groups to Component Stack outputs (#67 )	2024-09-07 14:31:06 +02:00
Eric Tuvesson	46f6cb2da9	feat(viewer-react): Add Target Page input to "Push Component To Stack" (#66 )	2024-09-07 14:14:39 +02:00
Eric Tuvesson	34c3d07112	feat(editor): Add "Used in x places" in Component List menu (#65 )	2024-09-05 13:35:15 +02:00
Eric Tuvesson	d85dce8d02	refactor(editor): useNodeReferences to React context (#64 )	2024-09-05 13:19:17 +02:00
Eric Tuvesson	89ed2d602f	feat: Add source maps (#63 )	2024-09-05 09:59:11 +02:00
Eric Tuvesson	94dd3dbf0e	chore: bump version (#62 )	2024-08-08 21:27:12 +02:00
Eric Tuvesson	c593a134b3	chore: rename project name (#60 )	2024-08-08 21:23:23 +02:00
Eric Tuvesson	dc638ea8fc	feat: Upgrade Electron (#61 )	2024-08-08 21:12:39 +02:00
Eric Tuvesson	759c8a0030	fix(runtime): Column node, hide children on calculation (#59 ) This removes the initial visible layout shift	2024-07-24 15:59:10 +02:00
Eric Tuvesson	aea80c6586	feat(runtime): Add capture attribute on Open File Picker node (#57 ) - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#capture - https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture	2024-07-19 15:03:03 +02:00
Eric Tuvesson	46e2efa576	feat(runtime): Add "Switched" signal output on the Switch node (#58 )	2024-07-19 15:02:49 +02:00
Eric Tuvesson	c508e15546	chore: clean up user nodes (#53 )	2024-07-15 15:21:01 +02:00
Eric Tuvesson	d61effc615	feat(editor): Deploy popup always mounted (#51 ) This removes the delayed loading when opening the deploy popup	2024-07-08 12:47:28 +02:00
Eric Tuvesson	12be6dc69f	feat(editor): Upgrade electron (#50 )	2024-07-08 09:35:18 +02:00
Eric Tuvesson	17e3d16436	chore: clean up editor assets (#12 )	2024-07-08 08:09:39 +02:00
Eric Tuvesson	233479a1bc	feat: Add Support for Parse Server v7 (#20 ) * feat: Upgrade Aggregate queries to latest Parse API * feat: Save parse server major version in metadata This can be used to determine which version of the Parse API that will be used. * fix: Add support for both versions of aggregate queries	2024-07-08 08:06:47 +02:00
Eric Tuvesson	57e5246022	feat(runtime): Add default label to String Format node (#49 ) Update the String Format node default label to show the format, like how the other nodes work.	2024-07-04 15:54:20 +02:00
Eric Tuvesson	dda22e0de6	feat(runtime): Add Image node output "On Error" signal (#48 ) "On Error" is triggered when the image is not loading correctly, making it possible to hide the Image node or show a placeholder instead.	2024-07-04 14:02:34 +02:00
Eric Tuvesson	618955e1ee	feat: Portal include Project ID (#47 )	2024-06-28 00:43:34 +02:00
Eric Tuvesson	8c7d4faeca	fix(runtime): Column node added a div with empty Repeater (#45 ) When the Column node only had an empty Repeater child, there was an empty HTML element.	2024-06-27 21:16:50 +02:00
Eric Tuvesson	c5754c9160	feat(runtime): Add "data-testId" attribute to Columns node (#44 )	2024-06-27 15:42:25 +02:00
Eric Tuvesson	3fb3668fc3	feat: Allow relative git repository (#41 )	2024-06-26 21:11:50 +02:00
Eric Tuvesson	fa282d6169	feat(runtime): Add "data-testid" attributes to UI nodes (#42 )	2024-06-26 21:08:01 +02:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3zm-9-3.82l-2.09-2.09L6.5 13.5 10 17l6.01-6.01-1.41-1.41z"/></svg>
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>`