feat: Create RouteVisualization component for external applications usage.

packages/ui/package.json

@@ -18,6 +18,10 @@
       "import": "./lib/esm/public-api.js",
       "require": "./lib/cjs/public-api.js"
     },
+    "./components": {
+      "import": "./lib/esm/components-api.js",
+      "require": "./lib/cjs/components-api.js"
+    },
     "./models": {
       "import": "./lib/esm/models-api.js",
       "require": "./lib/cjs/models-api.js"

packages/ui/src/components-api.ts

@@ -0,0 +1 @@
+export * from './external/RouteVisualisation/RouteVisualization';

packages/ui/src/external/RouteVisualisation/RouteVisualization.tsx

@@ -0,0 +1,40 @@
+import React, { useContext, useEffect, useLayoutEffect } from 'react';
+import { EntitiesContext, EntitiesProvider, RuntimeProvider, VisibleFlowsProvider } from '../../providers';
+import { Visualization } from '../../components/Visualization/Visualization';
+import { EventNotifier } from '../../utils';
+
+const Viz: React.FC<{ catalogUrl: string }> = ({ catalogUrl }) => {
+  const entitiesContext = useContext(EntitiesContext);
+  const visualEntities = entitiesContext?.visualEntities ?? [];
+  return (
+    <RuntimeProvider catalogUrl={catalogUrl}>
+      <VisibleFlowsProvider>
+        <Visualization className={'canvas-page'} entities={visualEntities} />
+      </VisibleFlowsProvider>
+    </RuntimeProvider>
+  );
+};
+
+export const RouteVisualization: React.FC<{ catalogUrl: string; code: string; codeChange: (code: string) => void }> = ({
+  catalogUrl,
+  code,
+  codeChange,
+}) => {
+  const eventNotifier = EventNotifier.getInstance();
+  //
+  useLayoutEffect(() => {
+    return eventNotifier.subscribe('entities:updated', (code: string) => {
+      codeChange(code);
+    });
+  }, [eventNotifier, codeChange]);
+
+  useEffect(() => {
+    eventNotifier.next('code:updated', code);
+  }, [code, eventNotifier]);
+
+  return (
+    <EntitiesProvider>
+      <Viz catalogUrl={catalogUrl} />
+    </EntitiesProvider>
+  );
+};

packages/ui/src/external/index.ts

@@ -0,0 +1 @@
+export * from './RouteVisualisation/RouteVisualization';

packages/ui/tsconfig.esm.json

@@ -28,7 +28,7 @@
       "@testing-library/jest-dom",
     ]
   },
-  "include": ["src/public-api.ts", "src/models-api.ts", "src/testing-api.ts", "src/global.d.ts"],
+  "include": ["src/public-api.ts", "src/models-api.ts", "src/testing-api.ts","src/components-api.ts", "src/global.d.ts"],
   "exclude": ["src/**/*.test.tsx", "src/**/*.test.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }