From b2dcc46e16273dd974b394afbd03258822ce94c9 Mon Sep 17 00:00:00 2001
From: mmelko <mmelko@redhat.com>
Date: Thu, 15 Aug 2024 14:32:49 +0200
Subject: [PATCH] feat: Create RouteVisualization component for external
 applications usage.

---
 packages/ui/package.json                      |  4 ++
 packages/ui/src/components-api.ts             |  1 +
 .../RouteVisualisation/RouteVisualization.tsx | 40 +++++++++++++++++++
 packages/ui/src/external/index.ts             |  1 +
 packages/ui/tsconfig.esm.json                 |  2 +-
 5 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/components-api.ts
 create mode 100644 packages/ui/src/external/RouteVisualisation/RouteVisualization.tsx
 create mode 100644 packages/ui/src/external/index.ts

diff --git a/packages/ui/package.json b/packages/ui/package.json
index 7965ede2f..39c8933e3 100644
--- a/packages/ui/package.json
+++ b/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"
diff --git a/packages/ui/src/components-api.ts b/packages/ui/src/components-api.ts
new file mode 100644
index 000000000..e1e1a672e
--- /dev/null
+++ b/packages/ui/src/components-api.ts
@@ -0,0 +1 @@
+export * from './external/RouteVisualisation/RouteVisualization';
diff --git a/packages/ui/src/external/RouteVisualisation/RouteVisualization.tsx b/packages/ui/src/external/RouteVisualisation/RouteVisualization.tsx
new file mode 100644
index 000000000..f92b0fb4e
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/ui/src/external/index.ts b/packages/ui/src/external/index.ts
new file mode 100644
index 000000000..d70727bd6
--- /dev/null
+++ b/packages/ui/src/external/index.ts
@@ -0,0 +1 @@
+export * from './RouteVisualisation/RouteVisualization';
diff --git a/packages/ui/tsconfig.esm.json b/packages/ui/tsconfig.esm.json
index 94d8bad06..9ce8320e4 100644
--- a/packages/ui/tsconfig.esm.json
+++ b/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" }]
 }