diff --git a/package-lock.json b/package-lock.json
index ee25b2e72..2ce0a841f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12117,6 +12117,48 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@formatjs/intl": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.7.2.tgz",
+      "integrity": "sha512-ziiQfnXwY0/rXhtohSAmYMqDjRsihoMKdl8H2aA+FvxG9638E0XrvfBFCb+1HhimNiuqRz5fTY7F/bZtsJxsjA==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.15.0",
+        "@formatjs/fast-memoize": "2.0.1",
+        "@formatjs/icu-messageformat-parser": "2.4.0",
+        "@formatjs/intl-displaynames": "6.3.2",
+        "@formatjs/intl-listformat": "7.2.2",
+        "intl-messageformat": "10.3.5",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "typescript": "^4.7 || 5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@formatjs/intl-displaynames": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.3.2.tgz",
+      "integrity": "sha512-kBOh0O7QYKLUqaZujLSEF2+au017plPp63R6Hrokl+oDtLyTt9y9pEuCTbOKh/P8CC9THnDLKRKgeVWZw5Ek8A==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.15.0",
+        "@formatjs/intl-localematcher": "0.2.32",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl-listformat": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.2.2.tgz",
+      "integrity": "sha512-YIruRGwUrmgVOXjWi6VbwPcRNBkEfgK2DFjyyqopCmpfJ+39vnl46oLpVchErnuXs6kkARy5GcGaGV7xRsH4lw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.15.0",
+        "@formatjs/intl-localematcher": "0.2.32",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@formatjs/intl-localematcher": {
       "version": "0.2.32",
       "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.32.tgz",
@@ -27085,7 +27127,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
       "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/react": "*",
@@ -39316,41 +39357,13 @@
       "license": "MIT"
     },
     "node_modules/intl-messageformat": {
-      "version": "10.3.3",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.3.3.tgz",
-      "integrity": "sha512-un/f07/g2e/3Q8e1ghDKET+el22Bi49M7O/rHxd597R+oLpPOMykSv5s51cABVfu3FZW+fea4hrzf2MHu1W4hw==",
+      "version": "10.3.5",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.3.5.tgz",
+      "integrity": "sha512-6kPkftF8Jg3XJCkGKa5OD+nYQ+qcSxF4ZkuDdXZ6KGG0VXn+iblJqRFyDdm9VvKcMyC0Km2+JlVQffFM52D0YA==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.14.3",
+        "@formatjs/ecma402-abstract": "1.15.0",
         "@formatjs/fast-memoize": "2.0.1",
-        "@formatjs/icu-messageformat-parser": "2.3.0",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/intl-messageformat/node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.14.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.14.3.tgz",
-      "integrity": "sha512-SlsbRC/RX+/zg4AApWIFNDdkLtFbkq3LNoZWXZCE/nHVKqoIJyaoQyge/I0Y38vLxowUn9KTtXgusLD91+orbg==",
-      "dependencies": {
-        "@formatjs/intl-localematcher": "0.2.32",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/intl-messageformat/node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.3.0.tgz",
-      "integrity": "sha512-xqtlqYAbfJDF4b6e4O828LBNOWXrFcuYadqAbYORlDRwhyJ2bH+xpUBPldZbzRGUN2mxlZ4Ykhm7jvERtmI8NQ==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.14.3",
-        "@formatjs/icu-skeleton-parser": "1.3.18",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/intl-messageformat/node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.3.18",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.18.tgz",
-      "integrity": "sha512-ND1ZkZfmLPcHjAH1sVpkpQxA+QYfOX3py3SjKWMUVGDow18gZ0WPqz3F+pJLYQMpS2LnnQ5zYR2jPVYTbRwMpg==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.14.3",
+        "@formatjs/icu-messageformat-parser": "2.4.0",
         "tslib": "^2.4.0"
       }
     },
@@ -54073,6 +54086,32 @@
         "react": "^16.8.4 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-intl": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.4.2.tgz",
+      "integrity": "sha512-q8QyLZfbyqV3Ifa7vtjRrgfSQPGTR6Fi+u9tP/CuzhUPl9DJEPIrvUFhlBryKtRW2qNASqchaP/79Obip+h6oA==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.15.0",
+        "@formatjs/icu-messageformat-parser": "2.4.0",
+        "@formatjs/intl": "2.7.2",
+        "@formatjs/intl-displaynames": "6.3.2",
+        "@formatjs/intl-listformat": "7.2.2",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/react": "16 || 17 || 18",
+        "hoist-non-react-statics": "^3.3.2",
+        "intl-messageformat": "10.3.5",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || 17 || 18",
+        "typescript": "^4.7 || 5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -66453,6 +66492,7 @@
         "lodash.omitby": "^4.6.0",
         "parse-duration": "^1.0.3",
         "react-cytoscapejs": "^2.0.0",
+        "react-intl": "6.4.2",
         "styled-components": "^5.3.10",
         "uuid": "^9.0.0",
         "video.js": "8.3.0"
@@ -67711,91 +67751,6 @@
         "react-intl": "^6"
       }
     },
-    "packages/scene-composer/node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.14.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.14.3.tgz",
-      "integrity": "sha512-SlsbRC/RX+/zg4AApWIFNDdkLtFbkq3LNoZWXZCE/nHVKqoIJyaoQyge/I0Y38vLxowUn9KTtXgusLD91+orbg==",
-      "dev": true,
-      "dependencies": {
-        "@formatjs/intl-localematcher": "0.2.32",
-        "tslib": "^2.4.0"
-      }
-    },
-    "packages/scene-composer/node_modules/@formatjs/fast-memoize": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.8.tgz",
-      "integrity": "sha512-PemNUObyoIZcqdQ1ixTPugzAzhEj7j6AHIyrq/qR6x5BFTvOQeXHYsVZUqBEFduAIscUaDfou+U+xTqOiunJ3Q==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "packages/scene-composer/node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.3.0.tgz",
-      "integrity": "sha512-xqtlqYAbfJDF4b6e4O828LBNOWXrFcuYadqAbYORlDRwhyJ2bH+xpUBPldZbzRGUN2mxlZ4Ykhm7jvERtmI8NQ==",
-      "dev": true,
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.14.3",
-        "@formatjs/icu-skeleton-parser": "1.3.18",
-        "tslib": "^2.4.0"
-      }
-    },
-    "packages/scene-composer/node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.3.18",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.18.tgz",
-      "integrity": "sha512-ND1ZkZfmLPcHjAH1sVpkpQxA+QYfOX3py3SjKWMUVGDow18gZ0WPqz3F+pJLYQMpS2LnnQ5zYR2jPVYTbRwMpg==",
-      "dev": true,
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.14.3",
-        "tslib": "^2.4.0"
-      }
-    },
-    "packages/scene-composer/node_modules/@formatjs/intl": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.6.7.tgz",
-      "integrity": "sha512-9FvEJfUMzlmP5ZBK3EE0928kVsZmD5aeWXg+faP8+mKIvG3c0hkLEXQ2MiUrXQt4rsEzOPbYVtBdthzSM0e2fw==",
-      "dev": true,
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.14.3",
-        "@formatjs/fast-memoize": "1.2.8",
-        "@formatjs/icu-messageformat-parser": "2.3.0",
-        "@formatjs/intl-displaynames": "6.2.6",
-        "@formatjs/intl-listformat": "7.1.9",
-        "intl-messageformat": "10.3.1",
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "typescript": "^4.7"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "packages/scene-composer/node_modules/@formatjs/intl-displaynames": {
-      "version": "6.2.6",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.2.6.tgz",
-      "integrity": "sha512-scf5AQTk9EjpvPhboo5sizVOvidTdMOnajv9z+0cejvl7JNl9bl/aMrNBgC72UH+bP3l45usPUKAGskV6sNIrA==",
-      "dev": true,
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.14.3",
-        "@formatjs/intl-localematcher": "0.2.32",
-        "tslib": "^2.4.0"
-      }
-    },
-    "packages/scene-composer/node_modules/@formatjs/intl-listformat": {
-      "version": "7.1.9",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.1.9.tgz",
-      "integrity": "sha512-5YikxwRqRXTVWVujhswDOTCq6gs+m9IcNbNZLa6FLtyBStAjEsuE2vAU+lPsbz9ZTST57D5fodjIh2JXT6sMWQ==",
-      "dev": true,
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.14.3",
-        "@formatjs/intl-localematcher": "0.2.32",
-        "tslib": "^2.4.0"
-      }
-    },
     "packages/scene-composer/node_modules/@jest/transform": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.6.2.tgz",
@@ -68436,18 +68391,6 @@
         "node": ">=8"
       }
     },
-    "packages/scene-composer/node_modules/intl-messageformat": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.3.1.tgz",
-      "integrity": "sha512-mqHc6arhbogrdImIsEscdjWnJcg2bvg3MiyGXDsTSGmPbbM2KtRUe7oNgDUbkM3HMn4KbyOct2JyJScmwRgGSQ==",
-      "dev": true,
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.14.3",
-        "@formatjs/fast-memoize": "1.2.8",
-        "@formatjs/icu-messageformat-parser": "2.3.0",
-        "tslib": "^2.4.0"
-      }
-    },
     "packages/scene-composer/node_modules/jest": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
@@ -68689,33 +68632,6 @@
         "react": "^16.8.4 || ^17.0.0"
       }
     },
-    "packages/scene-composer/node_modules/react-intl": {
-      "version": "6.2.10",
-      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.2.10.tgz",
-      "integrity": "sha512-l2TpskkFR0OzQnq7ChiJ5ZX23USZSzpKOcaR9MYC4UOHE9bT4kQ5JXXolgkq3tiOlvseEOzUCerlzn886AX9Yg==",
-      "dev": true,
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.14.3",
-        "@formatjs/icu-messageformat-parser": "2.3.0",
-        "@formatjs/intl": "2.6.7",
-        "@formatjs/intl-displaynames": "6.2.6",
-        "@formatjs/intl-listformat": "7.1.9",
-        "@types/hoist-non-react-statics": "^3.3.1",
-        "@types/react": "16 || 17 || 18",
-        "hoist-non-react-statics": "^3.3.2",
-        "intl-messageformat": "10.3.1",
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "react": "^16.6.0 || 17 || 18",
-        "typescript": "^4.7"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "packages/scene-composer/node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -78170,6 +78086,40 @@
         "tslib": "^2.4.0"
       }
     },
+    "@formatjs/intl": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.7.2.tgz",
+      "integrity": "sha512-ziiQfnXwY0/rXhtohSAmYMqDjRsihoMKdl8H2aA+FvxG9638E0XrvfBFCb+1HhimNiuqRz5fTY7F/bZtsJxsjA==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.15.0",
+        "@formatjs/fast-memoize": "2.0.1",
+        "@formatjs/icu-messageformat-parser": "2.4.0",
+        "@formatjs/intl-displaynames": "6.3.2",
+        "@formatjs/intl-listformat": "7.2.2",
+        "intl-messageformat": "10.3.5",
+        "tslib": "^2.4.0"
+      }
+    },
+    "@formatjs/intl-displaynames": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.3.2.tgz",
+      "integrity": "sha512-kBOh0O7QYKLUqaZujLSEF2+au017plPp63R6Hrokl+oDtLyTt9y9pEuCTbOKh/P8CC9THnDLKRKgeVWZw5Ek8A==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.15.0",
+        "@formatjs/intl-localematcher": "0.2.32",
+        "tslib": "^2.4.0"
+      }
+    },
+    "@formatjs/intl-listformat": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.2.2.tgz",
+      "integrity": "sha512-YIruRGwUrmgVOXjWi6VbwPcRNBkEfgK2DFjyyqopCmpfJ+39vnl46oLpVchErnuXs6kkARy5GcGaGV7xRsH4lw==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.15.0",
+        "@formatjs/intl-localematcher": "0.2.32",
+        "tslib": "^2.4.0"
+      }
+    },
     "@formatjs/intl-localematcher": {
       "version": "0.2.32",
       "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.32.tgz",
@@ -79485,6 +79435,7 @@
         "react": "^18.2.0",
         "react-cytoscapejs": "^2.0.0",
         "react-dom": "^18.2.0",
+        "react-intl": "6.4.2",
         "storybook-dark-mode": "^3.0.0",
         "styled-components": "^5.3.10",
         "typescript": "^4.9.5",
@@ -80422,83 +80373,6 @@
         "zustand": "^3.7.2"
       },
       "dependencies": {
-        "@formatjs/ecma402-abstract": {
-          "version": "1.14.3",
-          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.14.3.tgz",
-          "integrity": "sha512-SlsbRC/RX+/zg4AApWIFNDdkLtFbkq3LNoZWXZCE/nHVKqoIJyaoQyge/I0Y38vLxowUn9KTtXgusLD91+orbg==",
-          "dev": true,
-          "requires": {
-            "@formatjs/intl-localematcher": "0.2.32",
-            "tslib": "^2.4.0"
-          }
-        },
-        "@formatjs/fast-memoize": {
-          "version": "1.2.8",
-          "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.8.tgz",
-          "integrity": "sha512-PemNUObyoIZcqdQ1ixTPugzAzhEj7j6AHIyrq/qR6x5BFTvOQeXHYsVZUqBEFduAIscUaDfou+U+xTqOiunJ3Q==",
-          "dev": true,
-          "requires": {
-            "tslib": "^2.4.0"
-          }
-        },
-        "@formatjs/icu-messageformat-parser": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.3.0.tgz",
-          "integrity": "sha512-xqtlqYAbfJDF4b6e4O828LBNOWXrFcuYadqAbYORlDRwhyJ2bH+xpUBPldZbzRGUN2mxlZ4Ykhm7jvERtmI8NQ==",
-          "dev": true,
-          "requires": {
-            "@formatjs/ecma402-abstract": "1.14.3",
-            "@formatjs/icu-skeleton-parser": "1.3.18",
-            "tslib": "^2.4.0"
-          }
-        },
-        "@formatjs/icu-skeleton-parser": {
-          "version": "1.3.18",
-          "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.18.tgz",
-          "integrity": "sha512-ND1ZkZfmLPcHjAH1sVpkpQxA+QYfOX3py3SjKWMUVGDow18gZ0WPqz3F+pJLYQMpS2LnnQ5zYR2jPVYTbRwMpg==",
-          "dev": true,
-          "requires": {
-            "@formatjs/ecma402-abstract": "1.14.3",
-            "tslib": "^2.4.0"
-          }
-        },
-        "@formatjs/intl": {
-          "version": "2.6.7",
-          "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.6.7.tgz",
-          "integrity": "sha512-9FvEJfUMzlmP5ZBK3EE0928kVsZmD5aeWXg+faP8+mKIvG3c0hkLEXQ2MiUrXQt4rsEzOPbYVtBdthzSM0e2fw==",
-          "dev": true,
-          "requires": {
-            "@formatjs/ecma402-abstract": "1.14.3",
-            "@formatjs/fast-memoize": "1.2.8",
-            "@formatjs/icu-messageformat-parser": "2.3.0",
-            "@formatjs/intl-displaynames": "6.2.6",
-            "@formatjs/intl-listformat": "7.1.9",
-            "intl-messageformat": "10.3.1",
-            "tslib": "^2.4.0"
-          }
-        },
-        "@formatjs/intl-displaynames": {
-          "version": "6.2.6",
-          "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.2.6.tgz",
-          "integrity": "sha512-scf5AQTk9EjpvPhboo5sizVOvidTdMOnajv9z+0cejvl7JNl9bl/aMrNBgC72UH+bP3l45usPUKAGskV6sNIrA==",
-          "dev": true,
-          "requires": {
-            "@formatjs/ecma402-abstract": "1.14.3",
-            "@formatjs/intl-localematcher": "0.2.32",
-            "tslib": "^2.4.0"
-          }
-        },
-        "@formatjs/intl-listformat": {
-          "version": "7.1.9",
-          "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.1.9.tgz",
-          "integrity": "sha512-5YikxwRqRXTVWVujhswDOTCq6gs+m9IcNbNZLa6FLtyBStAjEsuE2vAU+lPsbz9ZTST57D5fodjIh2JXT6sMWQ==",
-          "dev": true,
-          "requires": {
-            "@formatjs/ecma402-abstract": "1.14.3",
-            "@formatjs/intl-localematcher": "0.2.32",
-            "tslib": "^2.4.0"
-          }
-        },
         "@jest/transform": {
           "version": "26.6.2",
           "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.6.2.tgz",
@@ -80892,18 +80766,6 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
-        "intl-messageformat": {
-          "version": "10.3.1",
-          "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.3.1.tgz",
-          "integrity": "sha512-mqHc6arhbogrdImIsEscdjWnJcg2bvg3MiyGXDsTSGmPbbM2KtRUe7oNgDUbkM3HMn4KbyOct2JyJScmwRgGSQ==",
-          "dev": true,
-          "requires": {
-            "@formatjs/ecma402-abstract": "1.14.3",
-            "@formatjs/fast-memoize": "1.2.8",
-            "@formatjs/icu-messageformat-parser": "2.3.0",
-            "tslib": "^2.4.0"
-          }
-        },
         "jest": {
           "version": "27.5.1",
           "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
@@ -81079,24 +80941,6 @@
             "prop-types": "^15.0.0"
           }
         },
-        "react-intl": {
-          "version": "6.2.10",
-          "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.2.10.tgz",
-          "integrity": "sha512-l2TpskkFR0OzQnq7ChiJ5ZX23USZSzpKOcaR9MYC4UOHE9bT4kQ5JXXolgkq3tiOlvseEOzUCerlzn886AX9Yg==",
-          "dev": true,
-          "requires": {
-            "@formatjs/ecma402-abstract": "1.14.3",
-            "@formatjs/icu-messageformat-parser": "2.3.0",
-            "@formatjs/intl": "2.6.7",
-            "@formatjs/intl-displaynames": "6.2.6",
-            "@formatjs/intl-listformat": "7.1.9",
-            "@types/hoist-non-react-statics": "^3.3.1",
-            "@types/react": "16 || 17 || 18",
-            "hoist-non-react-statics": "^3.3.2",
-            "intl-messageformat": "10.3.1",
-            "tslib": "^2.4.0"
-          }
-        },
         "react-is": {
           "version": "17.0.2",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -92014,7 +91858,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
       "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
-      "dev": true,
       "requires": {
         "@types/react": "*",
         "hoist-non-react-statics": "^3.3.0"
@@ -98176,7 +98019,7 @@
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-prettier": "8.8.0",
-        "eslint-config-turbo": "*",
+        "eslint-config-turbo": "latest",
         "eslint-import-resolver-typescript": "^3.5.5",
         "eslint-plugin-formatjs": "4.10.1",
         "eslint-plugin-import": "2.27.5",
@@ -101109,44 +100952,14 @@
       }
     },
     "intl-messageformat": {
-      "version": "10.3.3",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.3.3.tgz",
-      "integrity": "sha512-un/f07/g2e/3Q8e1ghDKET+el22Bi49M7O/rHxd597R+oLpPOMykSv5s51cABVfu3FZW+fea4hrzf2MHu1W4hw==",
+      "version": "10.3.5",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.3.5.tgz",
+      "integrity": "sha512-6kPkftF8Jg3XJCkGKa5OD+nYQ+qcSxF4ZkuDdXZ6KGG0VXn+iblJqRFyDdm9VvKcMyC0Km2+JlVQffFM52D0YA==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.14.3",
+        "@formatjs/ecma402-abstract": "1.15.0",
         "@formatjs/fast-memoize": "2.0.1",
-        "@formatjs/icu-messageformat-parser": "2.3.0",
+        "@formatjs/icu-messageformat-parser": "2.4.0",
         "tslib": "^2.4.0"
-      },
-      "dependencies": {
-        "@formatjs/ecma402-abstract": {
-          "version": "1.14.3",
-          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.14.3.tgz",
-          "integrity": "sha512-SlsbRC/RX+/zg4AApWIFNDdkLtFbkq3LNoZWXZCE/nHVKqoIJyaoQyge/I0Y38vLxowUn9KTtXgusLD91+orbg==",
-          "requires": {
-            "@formatjs/intl-localematcher": "0.2.32",
-            "tslib": "^2.4.0"
-          }
-        },
-        "@formatjs/icu-messageformat-parser": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.3.0.tgz",
-          "integrity": "sha512-xqtlqYAbfJDF4b6e4O828LBNOWXrFcuYadqAbYORlDRwhyJ2bH+xpUBPldZbzRGUN2mxlZ4Ykhm7jvERtmI8NQ==",
-          "requires": {
-            "@formatjs/ecma402-abstract": "1.14.3",
-            "@formatjs/icu-skeleton-parser": "1.3.18",
-            "tslib": "^2.4.0"
-          }
-        },
-        "@formatjs/icu-skeleton-parser": {
-          "version": "1.3.18",
-          "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.18.tgz",
-          "integrity": "sha512-ND1ZkZfmLPcHjAH1sVpkpQxA+QYfOX3py3SjKWMUVGDow18gZ0WPqz3F+pJLYQMpS2LnnQ5zYR2jPVYTbRwMpg==",
-          "requires": {
-            "@formatjs/ecma402-abstract": "1.14.3",
-            "tslib": "^2.4.0"
-          }
-        }
       }
     },
     "into-stream": {
@@ -111630,6 +111443,23 @@
       "integrity": "sha512-cxKSeFTf7jpSSVddm66sKdolG90qURAX3g1roTeaN6x0YEbtWc8JpmFN9+yIqLNH2uEkYerWLtJZIXRIFuBKrg==",
       "dev": true
     },
+    "react-intl": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.4.2.tgz",
+      "integrity": "sha512-q8QyLZfbyqV3Ifa7vtjRrgfSQPGTR6Fi+u9tP/CuzhUPl9DJEPIrvUFhlBryKtRW2qNASqchaP/79Obip+h6oA==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.15.0",
+        "@formatjs/icu-messageformat-parser": "2.4.0",
+        "@formatjs/intl": "2.7.2",
+        "@formatjs/intl-displaynames": "6.3.2",
+        "@formatjs/intl-listformat": "7.2.2",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/react": "16 || 17 || 18",
+        "hoist-non-react-statics": "^3.3.2",
+        "intl-messageformat": "10.3.5",
+        "tslib": "^2.4.0"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/packages/react-components/.eslintrc.js b/packages/react-components/.eslintrc.js
index 53922603c..996653682 100644
--- a/packages/react-components/.eslintrc.js
+++ b/packages/react-components/.eslintrc.js
@@ -4,9 +4,13 @@ module.exports = {
   overrides: [
     {
       // Disabling explicit any rule for graph-view component since types are defined in 3p component.
-      files: ['**/src/components/graph/graph-view.tsx'],
+      files: [
+        '**/src/components/knowledge-graph/graph/graph-view.tsx',
+        '**/src/components/knowledge-graph/responseParser.tsx',
+      ],
       rules: {
         '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
       },
     },
   ],
diff --git a/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/bar-chart-chromium-darwin.png b/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/bar-chart-chromium-darwin.png
index b26bba4e3..fa8c66e34 100644
Binary files a/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/bar-chart-chromium-darwin.png and b/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/bar-chart-chromium-darwin.png differ
diff --git a/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/line-chart-chromium-darwin.png b/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/line-chart-chromium-darwin.png
index 29b89faac..53263fba5 100644
Binary files a/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/line-chart-chromium-darwin.png and b/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/line-chart-chromium-darwin.png differ
diff --git a/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/scatter-chart-chromium-darwin.png b/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/scatter-chart-chromium-darwin.png
index d1e7acd1e..a8d9dd78e 100644
Binary files a/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/scatter-chart-chromium-darwin.png and b/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/scatter-chart-chromium-darwin.png differ
diff --git a/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/status-timeline-chromium-darwin.png b/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/status-timeline-chromium-darwin.png
index ecb600638..cf5f784e7 100644
Binary files a/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/status-timeline-chromium-darwin.png and b/packages/react-components/e2e/tests/charts/charts.spec.ts-snapshots/status-timeline-chromium-darwin.png differ
diff --git a/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/custom-font-sizes-chromium-darwin.png b/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/custom-font-sizes-chromium-darwin.png
index 14eb9ad72..166795544 100644
Binary files a/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/custom-font-sizes-chromium-darwin.png and b/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/custom-font-sizes-chromium-darwin.png differ
diff --git a/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/default-chromium-darwin.png b/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/default-chromium-darwin.png
index 21a4b121f..f03e41b8b 100644
Binary files a/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/default-chromium-darwin.png and b/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/default-chromium-darwin.png differ
diff --git a/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/error-chromium-darwin.png b/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/error-chromium-darwin.png
index f05277991..c22a382ef 100644
Binary files a/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/error-chromium-darwin.png and b/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/error-chromium-darwin.png differ
diff --git a/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/icon-chromium-darwin.png b/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/icon-chromium-darwin.png
index c498e9d19..752938bd1 100644
Binary files a/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/icon-chromium-darwin.png and b/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/icon-chromium-darwin.png differ
diff --git a/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/loading-chromium-darwin.png b/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/loading-chromium-darwin.png
index 0e7d7c83a..7488a206e 100644
Binary files a/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/loading-chromium-darwin.png and b/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/loading-chromium-darwin.png differ
diff --git a/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/name-chromium-darwin.png b/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/name-chromium-darwin.png
index 3929d630c..e3333502b 100644
Binary files a/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/name-chromium-darwin.png and b/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/name-chromium-darwin.png differ
diff --git a/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/unit-chromium-darwin.png b/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/unit-chromium-darwin.png
index e5b32c8dd..4dafd4d95 100644
Binary files a/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/unit-chromium-darwin.png and b/packages/react-components/e2e/tests/kpi/kpi.spec.ts-snapshots/unit-chromium-darwin.png differ
diff --git a/packages/react-components/e2e/tests/status/status.spec.ts-snapshots/custom-font-sizes-chromium-darwin.png b/packages/react-components/e2e/tests/status/status.spec.ts-snapshots/custom-font-sizes-chromium-darwin.png
index ded43d7b7..d97891605 100644
Binary files a/packages/react-components/e2e/tests/status/status.spec.ts-snapshots/custom-font-sizes-chromium-darwin.png and b/packages/react-components/e2e/tests/status/status.spec.ts-snapshots/custom-font-sizes-chromium-darwin.png differ
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 9818cd50b..9151b0699 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -104,6 +104,7 @@
     "lodash.omitby": "^4.6.0",
     "parse-duration": "^1.0.3",
     "react-cytoscapejs": "^2.0.0",
+    "react-intl": "6.4.2",
     "styled-components": "^5.3.10",
     "uuid": "^9.0.0",
     "video.js": "8.3.0"
diff --git a/packages/react-components/src/components/graph/__snapshots__/graph.spec.tsx.snap b/packages/react-components/src/components/graph/__snapshots__/graph.spec.tsx.snap
deleted file mode 100644
index 2b0ff2d35..000000000
--- a/packages/react-components/src/components/graph/__snapshots__/graph.spec.tsx.snap
+++ /dev/null
@@ -1,128 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<graph /> renders default elements 1`] = `
-<div>
-  <div
-    class="iot-app-kit-graph"
-  >
-    <div
-      data-mocked="CytoscapeComponent"
-      layout="[object Object]"
-      style="width: 100%; height: 100%;"
-      stylesheet="[object Object],[object Object],[object Object],[object Object]"
-    >
-      [{"data":{"id":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","label":"floor_0","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","creationDate":1660021324601,"entityId":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","entityName":"floor_0","lastUpdateDate":1660021325780,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"FloorComponent","componentTypeId":"com.example.query.construction.floor","properties":[{"propertyName":"floorNumber","propertyValue":0}]}]}},{"data":{"id":"room_016bb5bd-d097-3e3a-83c2-54e3c9134f96","label":"room_0","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/room_016bb5bd-d097-3e3a-83c2-54e3c9134f96","creationDate":1660021325694,"entityId":"room_016bb5bd-d097-3e3a-83c2-54e3c9134f96","entityName":"room_0","lastUpdateDate":1660021326733,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"RoomComponent","componentTypeId":"com.example.query.construction.room","properties":[{"propertyName":"roomFunction","propertyValue":"meeting"},{"propertyName":"roomNumber","propertyValue":0}]}]}},{"data":{"id":"lighting_zone_020b4a63-d42a-32be-a4ac-6fff4e35aed4","label":"lighting_zone_0","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/lighting_zone_020b4a63-d42a-32be-a4ac-6fff4e35aed4","creationDate":1660021330380,"entityId":"lighting_zone_020b4a63-d42a-32be-a4ac-6fff4e35aed4","entityName":"lighting_zone_0","lastUpdateDate":1660021331386,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"ZoneComponent","componentTypeId":"com.example.query.zone.lighting","properties":[]}]}},{"data":{"id":"luminaire_1ffdb93f-6c16-34cf-970b-05be18d1e71a","label":"luminaire_0","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/luminaire_1ffdb93f-6c16-34cf-970b-05be18d1e71a","creationDate":1660021339120,"entityId":"luminaire_1ffdb93f-6c16-34cf-970b-05be18d1e71a","entityName":"luminaire_0","lastUpdateDate":1660021339896,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"LuminaireComponent","componentTypeId":"com.example.query.equipment.luminaire","properties":[]}]}},{"data":{"source":"room_016bb5bd-d097-3e3a-83c2-54e3c9134f96","target":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","label":"isLocationOf","relationshipName":"isLocationOf","targetEntityId":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","sourceComponentName":"RoomComponent","sourceEntityId":"room_016bb5bd-d097-3e3a-83c2-54e3c9134f96","sourceComponentTypeId":"com.example.query.construction.room"}},{"data":{"source":"lighting_zone_020b4a63-d42a-32be-a4ac-6fff4e35aed4","target":"room_016bb5bd-d097-3e3a-83c2-54e3c9134f96","label":"hasPart","relationshipName":"hasPart","targetEntityId":"room_016bb5bd-d097-3e3a-83c2-54e3c9134f96","sourceComponentName":"ZoneComponent","sourceEntityId":"lighting_zone_020b4a63-d42a-32be-a4ac-6fff4e35aed4","sourceComponentTypeId":"com.example.query.zone.lighting"}},{"data":{"source":"luminaire_1ffdb93f-6c16-34cf-970b-05be18d1e71a","target":"lighting_zone_020b4a63-d42a-32be-a4ac-6fff4e35aed4","label":"feed","relationshipName":"feed","targetEntityId":"lighting_zone_020b4a63-d42a-32be-a4ac-6fff4e35aed4","sourceComponentName":"LuminaireComponent","sourceEntityId":"luminaire_1ffdb93f-6c16-34cf-970b-05be18d1e71a","sourceComponentTypeId":"com.example.query.equipment.luminaire"}},{"data":{"id":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","label":"floor_0","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","creationDate":1660021324601,"entityId":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","entityName":"floor_0","lastUpdateDate":1660021325780,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"FloorComponent","componentTypeId":"com.example.query.construction.floor","properties":[{"propertyName":"floorNumber","propertyValue":0}]}]}},{"data":{"id":"room_7fb79c45-50d0-3b5d-9baf-f71d9658df64","label":"room_2","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/room_7fb79c45-50d0-3b5d-9baf-f71d9658df64","creationDate":1660021326061,"entityId":"room_7fb79c45-50d0-3b5d-9baf-f71d9658df64","entityName":"room_2","lastUpdateDate":1660021326847,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"RoomComponent","componentTypeId":"com.example.query.construction.room","properties":[{"propertyName":"roomFunction","propertyValue":"office"},{"propertyName":"roomNumber","propertyValue":2}]}]}},{"data":{"id":"lighting_zone_d1a9e1bc-6d62-3ca4-8dc1-16c25f95c849","label":"lighting_zone_2","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/lighting_zone_d1a9e1bc-6d62-3ca4-8dc1-16c25f95c849","creationDate":1660021330718,"entityId":"lighting_zone_d1a9e1bc-6d62-3ca4-8dc1-16c25f95c849","entityName":"lighting_zone_2","lastUpdateDate":1660021331574,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"ZoneComponent","componentTypeId":"com.example.query.zone.lighting","properties":[]}]}},{"data":{"id":"luminaire_9dfc8a92-7786-3bf6-a184-2c2a2246636f","label":"luminaire_2","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/luminaire_9dfc8a92-7786-3bf6-a184-2c2a2246636f","creationDate":1660021339445,"entityId":"luminaire_9dfc8a92-7786-3bf6-a184-2c2a2246636f","entityName":"luminaire_2","lastUpdateDate":1660021340253,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"LuminaireComponent","componentTypeId":"com.example.query.equipment.luminaire","properties":[]}]}},{"data":{"source":"room_7fb79c45-50d0-3b5d-9baf-f71d9658df64","target":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","label":"isLocationOf","relationshipName":"isLocationOf","targetEntityId":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","sourceComponentName":"RoomComponent","sourceEntityId":"room_7fb79c45-50d0-3b5d-9baf-f71d9658df64","sourceComponentTypeId":"com.example.query.construction.room"}},{"data":{"source":"lighting_zone_d1a9e1bc-6d62-3ca4-8dc1-16c25f95c849","target":"room_7fb79c45-50d0-3b5d-9baf-f71d9658df64","label":"hasPart","relationshipName":"hasPart","targetEntityId":"room_7fb79c45-50d0-3b5d-9baf-f71d9658df64","sourceComponentName":"ZoneComponent","sourceEntityId":"lighting_zone_d1a9e1bc-6d62-3ca4-8dc1-16c25f95c849","sourceComponentTypeId":"com.example.query.zone.lighting"}},{"data":{"source":"luminaire_9dfc8a92-7786-3bf6-a184-2c2a2246636f","target":"lighting_zone_d1a9e1bc-6d62-3ca4-8dc1-16c25f95c849","label":"feed","relationshipName":"feed","targetEntityId":"lighting_zone_d1a9e1bc-6d62-3ca4-8dc1-16c25f95c849","sourceComponentName":"LuminaireComponent","sourceEntityId":"luminaire_9dfc8a92-7786-3bf6-a184-2c2a2246636f","sourceComponentTypeId":"com.example.query.equipment.luminaire"}},{"data":{"id":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","label":"floor_0","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","creationDate":1660021324601,"entityId":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","entityName":"floor_0","lastUpdateDate":1660021325780,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"FloorComponent","componentTypeId":"com.example.query.construction.floor","properties":[{"propertyName":"floorNumber","propertyValue":0}]}]}},{"data":{"id":"room_c3d182ff-a37b-3724-a8d7-cca7bd51e512","label":"room_4","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/room_c3d182ff-a37b-3724-a8d7-cca7bd51e512","creationDate":1660021326493,"entityId":"room_c3d182ff-a37b-3724-a8d7-cca7bd51e512","entityName":"room_4","lastUpdateDate":1660021327451,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"RoomComponent","componentTypeId":"com.example.query.construction.room","properties":[{"propertyName":"roomFunction","propertyValue":"restroom"},{"propertyName":"roomNumber","propertyValue":4}]}]}},{"data":{"id":"lighting_zone_04cd9feb-7b70-38c9-90e1-b98f4c2fe62f","label":"lighting_zone_4","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/lighting_zone_04cd9feb-7b70-38c9-90e1-b98f4c2fe62f","creationDate":1660021331041,"entityId":"lighting_zone_04cd9feb-7b70-38c9-90e1-b98f4c2fe62f","entityName":"lighting_zone_4","lastUpdateDate":1660021331937,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"ZoneComponent","componentTypeId":"com.example.query.zone.lighting","properties":[]}]}},{"data":{"id":"luminaire_7aea00e2-d081-3177-8237-d144a7c0ff6b","label":"luminaire_4","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/luminaire_7aea00e2-d081-3177-8237-d144a7c0ff6b","creationDate":1660021339780,"entityId":"luminaire_7aea00e2-d081-3177-8237-d144a7c0ff6b","entityName":"luminaire_4","lastUpdateDate":1660021340578,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"LuminaireComponent","componentTypeId":"com.example.query.equipment.luminaire","properties":[]}]}},{"data":{"source":"room_c3d182ff-a37b-3724-a8d7-cca7bd51e512","target":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","label":"isLocationOf","relationshipName":"isLocationOf","targetEntityId":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","sourceComponentName":"RoomComponent","sourceEntityId":"room_c3d182ff-a37b-3724-a8d7-cca7bd51e512","sourceComponentTypeId":"com.example.query.construction.room"}},{"data":{"source":"lighting_zone_04cd9feb-7b70-38c9-90e1-b98f4c2fe62f","target":"room_c3d182ff-a37b-3724-a8d7-cca7bd51e512","label":"hasPart","relationshipName":"hasPart","targetEntityId":"room_c3d182ff-a37b-3724-a8d7-cca7bd51e512","sourceComponentName":"ZoneComponent","sourceEntityId":"lighting_zone_04cd9feb-7b70-38c9-90e1-b98f4c2fe62f","sourceComponentTypeId":"com.example.query.zone.lighting"}},{"data":{"source":"luminaire_7aea00e2-d081-3177-8237-d144a7c0ff6b","target":"lighting_zone_04cd9feb-7b70-38c9-90e1-b98f4c2fe62f","label":"feed","relationshipName":"feed","targetEntityId":"lighting_zone_04cd9feb-7b70-38c9-90e1-b98f4c2fe62f","sourceComponentName":"LuminaireComponent","sourceEntityId":"luminaire_7aea00e2-d081-3177-8237-d144a7c0ff6b","sourceComponentTypeId":"com.example.query.equipment.luminaire"}},{"data":{"id":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","label":"floor_0","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","creationDate":1660021324601,"entityId":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","entityName":"floor_0","lastUpdateDate":1660021325780,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"FloorComponent","componentTypeId":"com.example.query.construction.floor","properties":[{"propertyName":"floorNumber","propertyValue":0}]}]}},{"data":{"id":"room_e77f1506-c506-3b0a-b69c-b0b7449005ce","label":"room_1","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/room_e77f1506-c506-3b0a-b69c-b0b7449005ce","creationDate":1660021325877,"entityId":"room_e77f1506-c506-3b0a-b69c-b0b7449005ce","entityName":"room_1","lastUpdateDate":1660021326683,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"RoomComponent","componentTypeId":"com.example.query.construction.room","properties":[{"propertyName":"roomFunction","propertyValue":"meeting"},{"propertyName":"roomNumber","propertyValue":1}]}]}},{"data":{"id":"lighting_zone_db5249c8-1af7-3e6e-a3dc-f65438fbc73f","label":"lighting_zone_1","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/lighting_zone_db5249c8-1af7-3e6e-a3dc-f65438fbc73f","creationDate":1660021330550,"entityId":"lighting_zone_db5249c8-1af7-3e6e-a3dc-f65438fbc73f","entityName":"lighting_zone_1","lastUpdateDate":1660021331445,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"ZoneComponent","componentTypeId":"com.example.query.zone.lighting","properties":[]}]}},{"data":{"id":"luminaire_18e634a2-1da0-39e2-bfb8-3a6fbe6713ca","label":"luminaire_1","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/luminaire_18e634a2-1da0-39e2-bfb8-3a6fbe6713ca","creationDate":1660021339285,"entityId":"luminaire_18e634a2-1da0-39e2-bfb8-3a6fbe6713ca","entityName":"luminaire_1","lastUpdateDate":1660021340077,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"LuminaireComponent","componentTypeId":"com.example.query.equipment.luminaire","properties":[]}]}},{"data":{"source":"room_e77f1506-c506-3b0a-b69c-b0b7449005ce","target":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","label":"isLocationOf","relationshipName":"isLocationOf","targetEntityId":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","sourceComponentName":"RoomComponent","sourceEntityId":"room_e77f1506-c506-3b0a-b69c-b0b7449005ce","sourceComponentTypeId":"com.example.query.construction.room"}},{"data":{"source":"lighting_zone_db5249c8-1af7-3e6e-a3dc-f65438fbc73f","target":"room_e77f1506-c506-3b0a-b69c-b0b7449005ce","label":"hasPart","relationshipName":"hasPart","targetEntityId":"room_e77f1506-c506-3b0a-b69c-b0b7449005ce","sourceComponentName":"ZoneComponent","sourceEntityId":"lighting_zone_db5249c8-1af7-3e6e-a3dc-f65438fbc73f","sourceComponentTypeId":"com.example.query.zone.lighting"}},{"data":{"source":"luminaire_18e634a2-1da0-39e2-bfb8-3a6fbe6713ca","target":"lighting_zone_db5249c8-1af7-3e6e-a3dc-f65438fbc73f","label":"feed","relationshipName":"feed","targetEntityId":"lighting_zone_db5249c8-1af7-3e6e-a3dc-f65438fbc73f","sourceComponentName":"LuminaireComponent","sourceEntityId":"luminaire_18e634a2-1da0-39e2-bfb8-3a6fbe6713ca","sourceComponentTypeId":"com.example.query.equipment.luminaire"}},{"data":{"id":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","label":"floor_0","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","creationDate":1660021324601,"entityId":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","entityName":"floor_0","lastUpdateDate":1660021325780,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"FloorComponent","componentTypeId":"com.example.query.construction.floor","properties":[{"propertyName":"floorNumber","propertyValue":0}]}]}},{"data":{"id":"room_ea4be13f-ee11-3c35-8b79-ada57b500b4d","label":"room_3","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/room_ea4be13f-ee11-3c35-8b79-ada57b500b4d","creationDate":1660021326262,"entityId":"room_ea4be13f-ee11-3c35-8b79-ada57b500b4d","entityName":"room_3","lastUpdateDate":1660021327053,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"RoomComponent","componentTypeId":"com.example.query.construction.room","properties":[{"propertyName":"roomFunction","propertyValue":"office"},{"propertyName":"roomNumber","propertyValue":3}]}]}},{"data":{"id":"lighting_zone_76f9143b-9d49-340a-831d-b5e1ece86454","label":"lighting_zone_3","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/lighting_zone_76f9143b-9d49-340a-831d-b5e1ece86454","creationDate":1660021330884,"entityId":"lighting_zone_76f9143b-9d49-340a-831d-b5e1ece86454","entityName":"lighting_zone_3","lastUpdateDate":1660021331753,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"ZoneComponent","componentTypeId":"com.example.query.zone.lighting","properties":[]}]}},{"data":{"id":"luminaire_35c2c19b-7143-3b89-bc82-7f39d7568147","label":"luminaire_3","arn":"arn:aws:iottwinmaker:us-east-1:638842452100:workspace/SmartBuilding/entity/luminaire_35c2c19b-7143-3b89-bc82-7f39d7568147","creationDate":1660021339615,"entityId":"luminaire_35c2c19b-7143-3b89-bc82-7f39d7568147","entityName":"luminaire_3","lastUpdateDate":1660021340353,"workspaceId":"SmartBuilding","description":"","components":[{"componentName":"LuminaireComponent","componentTypeId":"com.example.query.equipment.luminaire","properties":[]}]}},{"data":{"source":"room_ea4be13f-ee11-3c35-8b79-ada57b500b4d","target":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","label":"isLocationOf","relationshipName":"isLocationOf","targetEntityId":"floor_3b577379-0cd4-32c9-8e9d-6dbd2d898c61","sourceComponentName":"RoomComponent","sourceEntityId":"room_ea4be13f-ee11-3c35-8b79-ada57b500b4d","sourceComponentTypeId":"com.example.query.construction.room"}},{"data":{"source":"lighting_zone_76f9143b-9d49-340a-831d-b5e1ece86454","target":"room_ea4be13f-ee11-3c35-8b79-ada57b500b4d","label":"hasPart","relationshipName":"hasPart","targetEntityId":"room_ea4be13f-ee11-3c35-8b79-ada57b500b4d","sourceComponentName":"ZoneComponent","sourceEntityId":"lighting_zone_76f9143b-9d49-340a-831d-b5e1ece86454","sourceComponentTypeId":"com.example.query.zone.lighting"}},{"data":{"source":"luminaire_35c2c19b-7143-3b89-bc82-7f39d7568147","target":"lighting_zone_76f9143b-9d49-340a-831d-b5e1ece86454","label":"feed","relationshipName":"feed","targetEntityId":"lighting_zone_76f9143b-9d49-340a-831d-b5e1ece86454","sourceComponentName":"LuminaireComponent","sourceEntityId":"luminaire_35c2c19b-7143-3b89-bc82-7f39d7568147","sourceComponentTypeId":"com.example.query.equipment.luminaire"}}]
-    </div>
-    <ul
-      class="iot-app-kit-graph-controls"
-    >
-      <li
-        class="iot-app-kit-graph-control-item"
-      >
-        <button
-          class="iot-app-kit-graph-button awsui_button_vjswe_12zyy_101 awsui_variant-icon_vjswe_12zyy_166 awsui_button-no-text_vjswe_12zyy_885"
-          data-testid="fit-button"
-          type="submit"
-        >
-          <span
-            class="awsui_icon_vjswe_12zyy_905 awsui_icon-left_vjswe_12zyy_905 awsui_icon_h11ix_ahfiu_98 awsui_size-normal-mapped-height_h11ix_ahfiu_151 awsui_size-normal_h11ix_ahfiu_147 awsui_variant-normal_h11ix_ahfiu_219"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              viewBox="0 0 16 16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M14 11v3h-4M2 11v3h4M2 5V2h4M14 5V2h-4M10 6H6v4h4V6Z"
-              />
-            </svg>
-          </span>
-        </button>
-      </li>
-      <li
-        class="iot-app-kit-graph-control-item"
-      >
-        <button
-          class="iot-app-kit-graph-button awsui_button_vjswe_12zyy_101 awsui_variant-icon_vjswe_12zyy_166 awsui_button-no-text_vjswe_12zyy_885"
-          data-testid="center-button"
-          type="submit"
-        >
-          <span
-            class="awsui_icon_vjswe_12zyy_905 awsui_icon-left_vjswe_12zyy_905 awsui_icon_h11ix_ahfiu_98 awsui_size-normal-mapped-height_h11ix_ahfiu_151 awsui_size-normal_h11ix_ahfiu_147 awsui_variant-normal_h11ix_ahfiu_219"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              viewBox="0 0 16 16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9 2h5v5M7 2H2v5M7 14H2V9M9 14h5V9M2 2l12 12M14 2 2 14"
-              />
-            </svg>
-          </span>
-        </button>
-      </li>
-      <li
-        class="iot-app-kit-graph-control-item"
-      >
-        <button
-          class="iot-app-kit-graph-button awsui_button_vjswe_12zyy_101 awsui_variant-icon_vjswe_12zyy_166 awsui_button-no-text_vjswe_12zyy_885"
-          data-testid="zoom-in-button"
-          type="submit"
-        >
-          <span
-            class="awsui_icon_vjswe_12zyy_905 awsui_icon-left_vjswe_12zyy_905 awsui_icon_h11ix_ahfiu_98 awsui_size-normal-mapped-height_h11ix_ahfiu_151 awsui_size-normal_h11ix_ahfiu_147 awsui_variant-normal_h11ix_ahfiu_219"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              viewBox="0 0 16 16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle
-                cx="6.885"
-                cy="6.885"
-                r="5.385"
-              />
-              <path
-                d="m14.5 14.5-3.846-3.846M7 4v6M10 7H4"
-              />
-            </svg>
-          </span>
-        </button>
-      </li>
-      <li
-        class="iot-app-kit-graph-control-item"
-      >
-        <button
-          class="iot-app-kit-graph-button awsui_button_vjswe_12zyy_101 awsui_variant-icon_vjswe_12zyy_166 awsui_button-no-text_vjswe_12zyy_885"
-          data-testid="zoom-out-button"
-          type="submit"
-        >
-          <span
-            class="awsui_icon_vjswe_12zyy_905 awsui_icon-left_vjswe_12zyy_905 awsui_icon_h11ix_ahfiu_98 awsui_size-normal-mapped-height_h11ix_ahfiu_151 awsui_size-normal_h11ix_ahfiu_147 awsui_variant-normal_h11ix_ahfiu_219"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              viewBox="0 0 16 16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle
-                cx="6.885"
-                cy="6.885"
-                r="5.385"
-              />
-              <path
-                d="m14.5 14.5-3.846-3.846M10 7H4"
-              />
-            </svg>
-          </span>
-        </button>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
diff --git a/packages/react-components/src/components/knowledge-graph/KnowledgeGraphPanel.tsx b/packages/react-components/src/components/knowledge-graph/KnowledgeGraphPanel.tsx
new file mode 100644
index 000000000..8e10d49f6
--- /dev/null
+++ b/packages/react-components/src/components/knowledge-graph/KnowledgeGraphPanel.tsx
@@ -0,0 +1,108 @@
+import React, { useEffect, useCallback, useMemo, useState } from 'react';
+import { IntlProvider, FormattedMessage } from 'react-intl';
+import { ElementDefinition } from 'cytoscape';
+import { Button, Container, Header, Input, SpaceBetween } from '@cloudscape-design/components';
+import { TwinMakerKGQueryDataModule } from '@iot-app-kit/source-iottwinmaker';
+import { Graph } from './graph';
+import StateManager, { useKnowledgeGraphState } from './StateManager';
+import { createKnowledgeGraphQueryClient } from './KnowledgeGraphQueries';
+import { ResponseParser } from './responseParser';
+import { getElementsDefinition } from './utils';
+
+interface KnowledgeGraphInterface {
+  kgDataSource: TwinMakerKGQueryDataModule;
+}
+const MAX_NUMBER_HOPS = 10;
+
+const KnowledgeGraphContainer: React.FC<KnowledgeGraphInterface> = ({ kgDataSource }) => {
+  const { selectedGraphNodeEntityId, setQueryResult, queryResult, clearGraphResults } = useKnowledgeGraphState();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [elements, setElements] = useState<ElementDefinition[]>([]);
+
+  const knowledgeGraphQueryClient = useMemo(() => {
+    return createKnowledgeGraphQueryClient(kgDataSource, setQueryResult);
+  }, [kgDataSource, setQueryResult]);
+
+  const onSearchClicked = useCallback(() => {
+    if (searchTerm) {
+      knowledgeGraphQueryClient.findEntitiesByName(searchTerm);
+    }
+  }, [knowledgeGraphQueryClient, searchTerm]);
+
+  const onExploreClicked = useCallback(() => {
+    if (selectedGraphNodeEntityId) {
+      knowledgeGraphQueryClient.findRelatedEntities(selectedGraphNodeEntityId, MAX_NUMBER_HOPS);
+    }
+  }, [selectedGraphNodeEntityId, knowledgeGraphQueryClient]);
+
+  const onClearClicked = useCallback(() => {
+    clearGraphResults(true);
+  }, [clearGraphResults]);
+
+  useEffect(() => {
+    if (queryResult) {
+      console.log('queryResults: ', queryResult);
+      const { nodeData, edgeData } = ResponseParser.parse(queryResult['rows'], queryResult['columnDescriptions']);
+      setElements(getElementsDefinition([...nodeData.values()], [...edgeData.values()]));
+    } else {
+      setElements([]);
+      setSearchTerm('');
+    }
+  }, [queryResult]);
+  return (
+    <Container header={<Header variant='h3'>Knowledge Graph</Header>}>
+      <SpaceBetween direction='vertical' size='s'>
+        <SpaceBetween direction='horizontal' size='s'>
+          <Input
+            type='text'
+            value={searchTerm}
+            onChange={(e) => {
+              setSearchTerm(e.detail.value);
+            }}
+          ></Input>
+          <Button onClick={onSearchClicked}>
+            {/* eventually will move to auto-generated IDs */}
+            <FormattedMessage
+              id='KnowledgeGraphPanel.button.search'
+              defaultMessage='Search'
+              description='Search button text'
+            />
+          </Button>
+        </SpaceBetween>
+        {/* inline styling here for testing only this will be fixed in the next PR */}
+        <Graph elements={elements} style={{ width: '1000px', height: '1000px' }} />
+        <SpaceBetween direction='horizontal' size='s'>
+          <Button disabled={selectedGraphNodeEntityId ? false : true} onClick={onExploreClicked}>
+            <FormattedMessage
+              id='KnowledgeGraphPanel.button.explore'
+              defaultMessage='Explore'
+              description='Explore button text'
+            />
+          </Button>
+          {queryResult ? (
+            <Button onClick={onClearClicked}>Clear</Button>
+          ) : (
+            <Button disabled onClick={onClearClicked}>
+              <FormattedMessage
+                id='KnowledgeGraphPanel.button.clear'
+                defaultMessage='Clear'
+                description='Clear button text'
+              />
+            </Button>
+          )}
+        </SpaceBetween>
+      </SpaceBetween>
+    </Container>
+  );
+};
+export const KnowledgeGraph: React.FC<KnowledgeGraphInterface> = (props) => {
+  return (
+    <StateManager>
+      {/* For the moment we're setting it to a fixed language, 
+      later we will determine the user's locale by evaluating the language request sent by the browser */}
+      <IntlProvider locale='en' defaultLocale='en'>
+        <KnowledgeGraphContainer {...props} />
+      </IntlProvider>
+    </StateManager>
+  );
+};
diff --git a/packages/react-components/src/components/knowledge-graph/KnowledgeGraphQueries.ts b/packages/react-components/src/components/knowledge-graph/KnowledgeGraphQueries.ts
new file mode 100644
index 000000000..2e9269f0a
--- /dev/null
+++ b/packages/react-components/src/components/knowledge-graph/KnowledgeGraphQueries.ts
@@ -0,0 +1,26 @@
+import { TwinMakerKGQueryDataModule } from '@iot-app-kit/source-iottwinmaker';
+import { ExecuteQueryCommandOutput } from '@aws-sdk/client-iottwinmaker';
+export interface KnowledgeGraphQueryInterface {
+  findEntitiesByName(name: string): Promise<void>;
+  findRelatedEntities(entityId: string, numberOfHops: number): Promise<void>;
+}
+export const createKnowledgeGraphQueryClient = function (
+  dataSource: TwinMakerKGQueryDataModule,
+  updateQueryResults: (result: ExecuteQueryCommandOutput) => void
+) {
+  const knowledgeGraphQuery: KnowledgeGraphQueryInterface = {
+    findEntitiesByName: async (name: string): Promise<void> => {
+      const result = await dataSource.executeQuery({
+        queryStatement: `SELECT e FROM EntityGraph MATCH (e) WHERE e.entityName like '%${name}%'`,
+      });
+      updateQueryResults(result);
+    },
+    findRelatedEntities: async (entityId: string, numberOfHops: number): Promise<void> => {
+      const result = await dataSource.executeQuery({
+        queryStatement: `SELECT e1 FROM EntityGraph MATCH (e)-[]-{1,${numberOfHops}}(e1) WHERE e.entityId = '${entityId}'`,
+      });
+      updateQueryResults(result);
+    },
+  };
+  return knowledgeGraphQuery;
+};
diff --git a/packages/react-components/src/components/knowledge-graph/StateManager.tsx b/packages/react-components/src/components/knowledge-graph/StateManager.tsx
new file mode 100644
index 000000000..752689004
--- /dev/null
+++ b/packages/react-components/src/components/knowledge-graph/StateManager.tsx
@@ -0,0 +1,43 @@
+import React, { ReactNode, createContext, useContext, useState } from 'react';
+import { ExecuteQueryCommandOutput } from '@aws-sdk/client-iottwinmaker';
+interface KnowledgeGraphContext {
+  selectedGraphNodeEntityId?: string;
+  setSelectedGraphNodeEntityId: (entityId?: string) => void;
+  queryStatement?: string;
+  setQueryStatement: (query: string) => void;
+  queryResult?: ExecuteQueryCommandOutput;
+  setQueryResult: (result: ExecuteQueryCommandOutput) => void;
+  clearGraphResults: (clear: boolean) => void;
+}
+export interface StateManagerProps {
+  children: ReactNode;
+}
+
+const context = createContext<KnowledgeGraphContext>({} as KnowledgeGraphContext);
+export function useKnowledgeGraphState() {
+  return useContext(context);
+}
+const StateManager: React.FC<StateManagerProps> = ({ children }) => {
+  const [selectedGraphNodeEntityId, setSelectedGraphNodeEntityId] = useState<string>();
+  const [queryStatement, setQueryStatement] = useState<string>();
+  const [queryResult, setQueryResult] = useState<ExecuteQueryCommandOutput>();
+  const clearGraphResults = (clear: boolean) => {
+    if (clear) setQueryResult(undefined);
+  };
+  return (
+    <context.Provider
+      value={{
+        selectedGraphNodeEntityId,
+        setSelectedGraphNodeEntityId,
+        queryStatement,
+        setQueryStatement,
+        queryResult,
+        setQueryResult,
+        clearGraphResults,
+      }}
+    >
+      {children}
+    </context.Provider>
+  );
+};
+export default StateManager;
diff --git a/packages/react-components/src/components/knowledge-graph/graph/__snapshots__/graph.spec.tsx.snap b/packages/react-components/src/components/knowledge-graph/graph/__snapshots__/graph.spec.tsx.snap
new file mode 100644
index 000000000..288e33fcf
--- /dev/null
+++ b/packages/react-components/src/components/knowledge-graph/graph/__snapshots__/graph.spec.tsx.snap
@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<graph /> renders default elements 1`] = `
+<div>
+  <div
+    class="iot-app-kit-graph"
+  >
+    <div
+      data-mocked="CytoscapeComponent"
+      layout="[object Object]"
+      style="width: 100%; height: 100%;"
+      stylesheet="[object Object],[object Object],[object Object],[object Object]"
+    >
+      []
+    </div>
+    <ul
+      class="iot-app-kit-graph-controls"
+    >
+      <li
+        class="iot-app-kit-graph-control-item"
+      >
+        <button
+          class="iot-app-kit-graph-button awsui_button_vjswe_12zyy_101 awsui_variant-icon_vjswe_12zyy_166 awsui_button-no-text_vjswe_12zyy_885"
+          data-testid="fit-button"
+          type="submit"
+        >
+          <span
+            class="awsui_icon_vjswe_12zyy_905 awsui_icon-left_vjswe_12zyy_905 awsui_icon_h11ix_ahfiu_98 awsui_size-normal-mapped-height_h11ix_ahfiu_151 awsui_size-normal_h11ix_ahfiu_147 awsui_variant-normal_h11ix_ahfiu_219"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M14 11v3h-4M2 11v3h4M2 5V2h4M14 5V2h-4M10 6H6v4h4V6Z"
+              />
+            </svg>
+          </span>
+        </button>
+      </li>
+      <li
+        class="iot-app-kit-graph-control-item"
+      >
+        <button
+          class="iot-app-kit-graph-button awsui_button_vjswe_12zyy_101 awsui_variant-icon_vjswe_12zyy_166 awsui_button-no-text_vjswe_12zyy_885"
+          data-testid="center-button"
+          type="submit"
+        >
+          <span
+            class="awsui_icon_vjswe_12zyy_905 awsui_icon-left_vjswe_12zyy_905 awsui_icon_h11ix_ahfiu_98 awsui_size-normal-mapped-height_h11ix_ahfiu_151 awsui_size-normal_h11ix_ahfiu_147 awsui_variant-normal_h11ix_ahfiu_219"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9 2h5v5M7 2H2v5M7 14H2V9M9 14h5V9M2 2l12 12M14 2 2 14"
+              />
+            </svg>
+          </span>
+        </button>
+      </li>
+      <li
+        class="iot-app-kit-graph-control-item"
+      >
+        <button
+          class="iot-app-kit-graph-button awsui_button_vjswe_12zyy_101 awsui_variant-icon_vjswe_12zyy_166 awsui_button-no-text_vjswe_12zyy_885"
+          data-testid="zoom-in-button"
+          type="submit"
+        >
+          <span
+            class="awsui_icon_vjswe_12zyy_905 awsui_icon-left_vjswe_12zyy_905 awsui_icon_h11ix_ahfiu_98 awsui_size-normal-mapped-height_h11ix_ahfiu_151 awsui_size-normal_h11ix_ahfiu_147 awsui_variant-normal_h11ix_ahfiu_219"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="6.885"
+                cy="6.885"
+                r="5.385"
+              />
+              <path
+                d="m14.5 14.5-3.846-3.846M7 4v6M10 7H4"
+              />
+            </svg>
+          </span>
+        </button>
+      </li>
+      <li
+        class="iot-app-kit-graph-control-item"
+      >
+        <button
+          class="iot-app-kit-graph-button awsui_button_vjswe_12zyy_101 awsui_variant-icon_vjswe_12zyy_166 awsui_button-no-text_vjswe_12zyy_885"
+          data-testid="zoom-out-button"
+          type="submit"
+        >
+          <span
+            class="awsui_icon_vjswe_12zyy_905 awsui_icon-left_vjswe_12zyy_905 awsui_icon_h11ix_ahfiu_98 awsui_size-normal-mapped-height_h11ix_ahfiu_151 awsui_size-normal_h11ix_ahfiu_147 awsui_variant-normal_h11ix_ahfiu_219"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="6.885"
+                cy="6.885"
+                r="5.385"
+              />
+              <path
+                d="m14.5 14.5-3.846-3.846M10 7H4"
+              />
+            </svg>
+          </span>
+        </button>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
diff --git a/packages/react-components/src/components/graph/constants.ts b/packages/react-components/src/components/knowledge-graph/graph/constants.ts
similarity index 100%
rename from packages/react-components/src/components/graph/constants.ts
rename to packages/react-components/src/components/knowledge-graph/graph/constants.ts
diff --git a/packages/react-components/src/components/graph/cytoscape-cloudscape-theme.ts b/packages/react-components/src/components/knowledge-graph/graph/cytoscape-cloudscape-theme.ts
similarity index 100%
rename from packages/react-components/src/components/graph/cytoscape-cloudscape-theme.ts
rename to packages/react-components/src/components/knowledge-graph/graph/cytoscape-cloudscape-theme.ts
diff --git a/packages/react-components/src/components/graph/graph-toolbar.tsx b/packages/react-components/src/components/knowledge-graph/graph/graph-toolbar.tsx
similarity index 100%
rename from packages/react-components/src/components/graph/graph-toolbar.tsx
rename to packages/react-components/src/components/knowledge-graph/graph/graph-toolbar.tsx
diff --git a/packages/react-components/src/components/graph/graph-view.tsx b/packages/react-components/src/components/knowledge-graph/graph/graph-view.tsx
similarity index 100%
rename from packages/react-components/src/components/graph/graph-view.tsx
rename to packages/react-components/src/components/knowledge-graph/graph/graph-view.tsx
diff --git a/packages/react-components/src/components/graph/graph.spec.tsx b/packages/react-components/src/components/knowledge-graph/graph/graph.spec.tsx
similarity index 90%
rename from packages/react-components/src/components/graph/graph.spec.tsx
rename to packages/react-components/src/components/knowledge-graph/graph/graph.spec.tsx
index b32950a60..c4da3ab11 100644
--- a/packages/react-components/src/components/graph/graph.spec.tsx
+++ b/packages/react-components/src/components/knowledge-graph/graph/graph.spec.tsx
@@ -31,7 +31,7 @@ jest.mock('./hooks/useCyEvent');
 
 describe('<graph />', () => {
   it('renders default elements', () => {
-    const { container } = render(<Graph />);
+    const { container } = render(<Graph elements={[]} />);
     expect(container).toMatchSnapshot();
   });
 
@@ -49,7 +49,7 @@ describe('<graph />', () => {
 
     useRefMock.mockReturnValueOnce(fakeCy);
 
-    render(<Graph />);
+    render(<Graph elements={[]} />);
 
     expect(fakeCy.current.resize).toHaveBeenCalled();
     expect(fakeCy.current.center).toHaveBeenCalled();
@@ -69,7 +69,7 @@ describe('<graph />', () => {
 
     useRefMock.mockReturnValueOnce(fakeCy);
 
-    const { findByTestId } = render(<Graph />);
+    const { findByTestId } = render(<Graph elements={[]} />);
     const sut = await findByTestId('fit-button');
 
     fireEvent.click(sut);
@@ -91,7 +91,7 @@ describe('<graph />', () => {
 
     useRefMock.mockReturnValueOnce(fakeCy);
 
-    const { findByTestId } = render(<Graph />);
+    const { findByTestId } = render(<Graph elements={[]} />);
     const sut = await findByTestId('center-button');
 
     fireEvent.click(sut);
@@ -113,7 +113,7 @@ describe('<graph />', () => {
 
     useRefMock.mockReturnValueOnce(fakeCy);
 
-    const { findByTestId } = render(<Graph />);
+    const { findByTestId } = render(<Graph elements={[]} />);
     const sut = await findByTestId('zoom-in-button');
 
     fireEvent.click(sut);
@@ -135,7 +135,7 @@ describe('<graph />', () => {
 
     useRefMock.mockReturnValueOnce(fakeCy);
 
-    const { findByTestId } = render(<Graph />);
+    const { findByTestId } = render(<Graph elements={[]} />);
     const sut = await findByTestId('zoom-out-button');
 
     fireEvent.click(sut);
diff --git a/packages/react-components/src/components/graph/graph.tsx b/packages/react-components/src/components/knowledge-graph/graph/graph.tsx
similarity index 68%
rename from packages/react-components/src/components/graph/graph.tsx
rename to packages/react-components/src/components/knowledge-graph/graph/graph.tsx
index 83e321786..4eb849f0a 100644
--- a/packages/react-components/src/components/graph/graph.tsx
+++ b/packages/react-components/src/components/knowledge-graph/graph/graph.tsx
@@ -1,6 +1,5 @@
 import React, { HTMLAttributes, useCallback, useEffect, useRef } from 'react';
 import type { Core, ElementDefinition, EventObject } from 'cytoscape';
-import { response3 as response } from './lib/response';
 
 import useCyEvent from './hooks/useCyEvent';
 import GraphView from './graph-view';
@@ -12,49 +11,14 @@ import { STYLE_PREFIX } from './constants';
 import useStylesheet from './cytoscape-cloudscape-theme';
 
 export interface GraphProps extends HTMLAttributes<HTMLDivElement> {
+  elements: ElementDefinition[];
   onNodeSelected?: (e: EventObject) => void;
   onEdgeSelected?: (e: EventObject) => void;
 }
 
 export const ZOOM_INTERVAL = 1;
 
-export type Node = {
-  entityId: string;
-  entityName: string;
-};
-
-export type Edge = {
-  sourceEntityId: string;
-  targetEntityId: string;
-  relationshipName: string;
-};
-
-export function Graph({ className, onNodeSelected, onEdgeSelected, ...props }: GraphProps) {
-  // TODO: Refactor this to use the datasource + query to get the data.
-  const elements: ElementDefinition[] = response.rows
-    .map((r) => r.rowData)
-    .reduce((acc, rowData) => {
-      const newElements = response.columnDescriptions.map((col, i) => {
-        const entity = rowData[i];
-        if (col.type === 'NODE') {
-          const node = entity as Node;
-          return { data: { id: node.entityId, label: node.entityName, ...node } } as ElementDefinition;
-        } else {
-          const relationship = entity as Edge;
-          return {
-            data: {
-              source: relationship.sourceEntityId,
-              target: relationship.targetEntityId,
-              label: relationship.relationshipName,
-              ...relationship,
-            },
-          } as ElementDefinition;
-        }
-      });
-
-      return [...acc, ...newElements];
-    }, [] as ElementDefinition[]);
-
+export function Graph({ className, elements, onNodeSelected, onEdgeSelected, ...props }: GraphProps) {
   const cy = useRef<Core>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -80,6 +44,7 @@ export function Graph({ className, onNodeSelected, onEdgeSelected, ...props }: G
     cy.current?.resize();
     cy.current?.center();
   }, []);
+  console.log('elements: ', elements);
 
   // TODO: Event modelling needs to be done properly, this is an example
   // istanbul ignore next (No point in testing as this is going to change in next update)
diff --git a/packages/react-components/src/components/graph/hooks/useCyEvent.spec.ts b/packages/react-components/src/components/knowledge-graph/graph/hooks/useCyEvent.spec.ts
similarity index 100%
rename from packages/react-components/src/components/graph/hooks/useCyEvent.spec.ts
rename to packages/react-components/src/components/knowledge-graph/graph/hooks/useCyEvent.spec.ts
diff --git a/packages/react-components/src/components/graph/hooks/useCyEvent.ts b/packages/react-components/src/components/knowledge-graph/graph/hooks/useCyEvent.ts
similarity index 100%
rename from packages/react-components/src/components/graph/hooks/useCyEvent.ts
rename to packages/react-components/src/components/knowledge-graph/graph/hooks/useCyEvent.ts
diff --git a/packages/react-components/src/components/graph/index.ts b/packages/react-components/src/components/knowledge-graph/graph/index.ts
similarity index 100%
rename from packages/react-components/src/components/graph/index.ts
rename to packages/react-components/src/components/knowledge-graph/graph/index.ts
diff --git a/packages/react-components/src/components/graph/lib/response.ts b/packages/react-components/src/components/knowledge-graph/graph/lib/response.ts
similarity index 100%
rename from packages/react-components/src/components/graph/lib/response.ts
rename to packages/react-components/src/components/knowledge-graph/graph/lib/response.ts
diff --git a/packages/react-components/src/components/graph/lib/types.ts b/packages/react-components/src/components/knowledge-graph/graph/lib/types.ts
similarity index 100%
rename from packages/react-components/src/components/graph/lib/types.ts
rename to packages/react-components/src/components/knowledge-graph/graph/lib/types.ts
diff --git a/packages/react-components/src/components/graph/styles.scss b/packages/react-components/src/components/knowledge-graph/graph/styles.scss
similarity index 100%
rename from packages/react-components/src/components/graph/styles.scss
rename to packages/react-components/src/components/knowledge-graph/graph/styles.scss
diff --git a/packages/react-components/src/components/graph/types.ts b/packages/react-components/src/components/knowledge-graph/graph/types.ts
similarity index 96%
rename from packages/react-components/src/components/graph/types.ts
rename to packages/react-components/src/components/knowledge-graph/graph/types.ts
index 7db75ae3d..c8e18c0ea 100644
--- a/packages/react-components/src/components/graph/types.ts
+++ b/packages/react-components/src/components/knowledge-graph/graph/types.ts
@@ -11,10 +11,9 @@ import type {
   UserInputDeviceEventName,
   UserInputDeviceEventNameExt,
 } from 'cytoscape';
+import { INodeResults } from '../interfaces';
 import type { ValueOf } from 'type-fest';
 
-import type { EntityData, Health } from './lib/types';
-
 export type layoutTypes = 'preset' | 'random' | 'grid' | 'circle' | 'concentric' | 'breadthfirst' | 'cose' | 'cise';
 
 export type EdgeStyleProps = {
@@ -57,10 +56,9 @@ export type EdgeEndpoint =
   | 'outside-to-line-or-label';
 
 export type NodeData = NodeDataDefinition & {
-  entityData: EntityData;
+  entityData?: INodeResults;
   id: string;
-  name: string;
-  state: Health;
+  label: string;
   shape?: Css.NodeShape;
 };
 
diff --git a/packages/react-components/src/components/knowledge-graph/index.ts b/packages/react-components/src/components/knowledge-graph/index.ts
new file mode 100644
index 000000000..2785670ce
--- /dev/null
+++ b/packages/react-components/src/components/knowledge-graph/index.ts
@@ -0,0 +1 @@
+export { KnowledgeGraph } from './KnowledgeGraphPanel';
diff --git a/packages/react-components/src/components/knowledge-graph/interfaces/index.ts b/packages/react-components/src/components/knowledge-graph/interfaces/index.ts
new file mode 100644
index 000000000..aeba8095e
--- /dev/null
+++ b/packages/react-components/src/components/knowledge-graph/interfaces/index.ts
@@ -0,0 +1,18 @@
+export interface INodeResults {
+  entityName?: string;
+  entityId: string;
+  creationDate?: Date;
+  lastUpdateDate?: Date;
+  arn?: string;
+  workspaceId?: string;
+  components?: [];
+  description?: string;
+}
+
+export interface IRelationResults {
+  sourceEntityId: string;
+  targetEntityId: string;
+  relationshipName?: string;
+  sourceComponentName?: string;
+  sourceComponentTypeId?: string;
+}
diff --git a/packages/react-components/src/components/knowledge-graph/responseParser.tsx b/packages/react-components/src/components/knowledge-graph/responseParser.tsx
new file mode 100644
index 000000000..b70807957
--- /dev/null
+++ b/packages/react-components/src/components/knowledge-graph/responseParser.tsx
@@ -0,0 +1,60 @@
+import { INodeResults, IRelationResults } from './interfaces';
+import { ExecuteQueryCommandOutput } from '@aws-sdk/client-iottwinmaker';
+import { NodeData, EdgeData } from './graph/types';
+
+function parseNode(item: INodeResults, nodeData: Map<string, NodeData>) {
+  const entityId = item.entityId;
+  const entityName = item.entityName;
+  const entityData: INodeResults = { ...item };
+  nodeData.set(entityId, {
+    entityData,
+    id: entityId,
+    label: entityName ? entityName : '',
+  });
+}
+function parseEdge(item: IRelationResults, edgeData: Map<string, EdgeData>) {
+  const sourceId = item.sourceEntityId;
+  const targetId = item.targetEntityId;
+  const relationshipName = item.relationshipName;
+  const id = `${sourceId}-${targetId}`;
+  edgeData.set(id, {
+    id,
+    label: relationshipName ? relationshipName : '',
+    source: sourceId,
+    target: targetId,
+  });
+}
+
+export class ResponseParser {
+  static parse(
+    queryRows: ExecuteQueryCommandOutput['rows'] | undefined,
+    queryColumnDescriptions: ExecuteQueryCommandOutput['columnDescriptions'] | undefined
+  ) {
+    const nodeData = new Map<string, NodeData>();
+    const edgeData = new Map<string, EdgeData>();
+    if (queryRows && queryColumnDescriptions) {
+      for (const row of queryRows) {
+        for (let columnNumber = 0; columnNumber < queryColumnDescriptions.length; columnNumber++) {
+          const itemType = queryColumnDescriptions[columnNumber].type;
+          const rowData = row.rowData;
+          const item = rowData![columnNumber];
+          switch (itemType) {
+            case 'NODE':
+              parseNode(item as unknown as INodeResults, nodeData);
+              break;
+            case 'EDGE':
+              parseEdge(item as unknown as IRelationResults, edgeData);
+              break;
+            case 'VALUE':
+              // Intentional do nothing
+              break;
+            default:
+              //Do nothing for now till we provide error handling.
+              break;
+          }
+        }
+      }
+    }
+    return { nodeData, edgeData };
+  }
+}
diff --git a/packages/react-components/src/components/knowledge-graph/utils/cytoscapeParsingUtils.ts b/packages/react-components/src/components/knowledge-graph/utils/cytoscapeParsingUtils.ts
new file mode 100644
index 000000000..ae79aeafb
--- /dev/null
+++ b/packages/react-components/src/components/knowledge-graph/utils/cytoscapeParsingUtils.ts
@@ -0,0 +1,18 @@
+import { ElementDefinition, NodeDefinition, EdgeDefinition } from 'cytoscape';
+import { NodeData, EdgeData } from '../graph/types';
+
+export function getElementsDefinition(nodeData: NodeData[], edgeData?: EdgeData[]): ElementDefinition[] {
+  const elements: ElementDefinition[] = [
+    ...nodeData.map<NodeDefinition>((data) => ({
+      data: { ...data },
+    })),
+  ];
+  if (edgeData) {
+    elements.push(
+      ...edgeData.map<EdgeDefinition>((data) => ({
+        data: { ...data },
+      }))
+    );
+  }
+  return elements;
+}
diff --git a/packages/react-components/src/components/knowledge-graph/utils/index.ts b/packages/react-components/src/components/knowledge-graph/utils/index.ts
new file mode 100644
index 000000000..0e4e6f987
--- /dev/null
+++ b/packages/react-components/src/components/knowledge-graph/utils/index.ts
@@ -0,0 +1 @@
+export * from './cytoscapeParsingUtils';
diff --git a/packages/react-components/stories/graph/graph.stories.tsx b/packages/react-components/stories/graph/graph.stories.tsx
index 00f0439c0..1b5b94aa2 100644
--- a/packages/react-components/stories/graph/graph.stories.tsx
+++ b/packages/react-components/stories/graph/graph.stories.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Graph } from '../../src/components/graph';
-import { colors } from '../../src/components/graph/cytoscape-cloudscape-theme';
+import { Graph } from '../../src/components/knowledge-graph/graph';
+import { colors } from '../../src/components/knowledge-graph/graph/cytoscape-cloudscape-theme';
+import { getElementsDefinition } from '../../src/components/knowledge-graph/utils';
+import { mockNodeData } from './mock-data';
 
 export default {
   title: 'Widgets/Graph',
@@ -19,11 +21,13 @@ export default {
     }, {} as { [key: string]: { control: { type: string; label: string } } }),
   },
 } as ComponentMeta<typeof Graph>;
+const nodeData = [...mockNodeData.values()];
+const elements = getElementsDefinition(nodeData);
 
 export const Basic: ComponentStory<typeof Graph> = () => {
   return (
     <div id='story-container' style={{ width: '100%', height: '100%' }}>
-      <Graph />
+      <Graph elements={elements} />
     </div>
   );
 };
@@ -32,7 +36,7 @@ export const InContainers: ComponentStory<typeof Graph> = () => {
   return (
     <div id='story-container' style={{ width: '100%', height: '100%' }}>
       <div style={{ width: '500px', height: '300px' }}>
-        <Graph />
+        <Graph elements={elements} />
       </div>
     </div>
   );
@@ -42,6 +46,7 @@ export const OverrideStyles: ComponentStory<typeof Graph> = () => {
   return (
     <div id='story-container' style={{ width: '100%', height: '100%' }}>
       <Graph
+        elements={elements}
         style={
           {
             [colors.nodeBackground]: 'yellow',
@@ -63,8 +68,9 @@ export const OverrideStyles: ComponentStory<typeof Graph> = () => {
 export const MultipleInstances: ComponentStory<typeof Graph> = () => {
   return (
     <div id='story-container' style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }}>
-      <Graph />
+      <Graph elements={elements} />
       <Graph
+        elements={elements}
         style={
           {
             [colors.nodeBackground]: 'yellow',
diff --git a/packages/react-components/stories/graph/mock-data.ts b/packages/react-components/stories/graph/mock-data.ts
index fdddf41a3..dae7dcff2 100644
--- a/packages/react-components/stories/graph/mock-data.ts
+++ b/packages/react-components/stories/graph/mock-data.ts
@@ -1,8 +1,8 @@
-import type { NodeData } from '../../src/components/graph/types';
+import type { NodeData } from '../../src/components/knowledge-graph/graph/types';
 
 const Mixer: NodeData = {
   id: '123',
-  name: 'Mixer',
+  label: 'Mixer',
   entityData: {
     entityId: 'entityId',
     entityName: 'entityName',