chore(viz): Introduce visualization-node class

relates to: KaotoIO#34

packages/ui/jest.config.ts

@@ -176,10 +176,7 @@ export default {
   // transform: undefined,
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  // transformIgnorePatterns: [
-  //   '\\\\node_modules\\\\',
-  //   '\\.pnp\\.[^\\\\]+$'
-  // ],
+  transformIgnorePatterns: ['\\\\node_modules\\\\'],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

packages/ui/package.json

@@ -19,6 +19,7 @@
     "lint:fix": "yarn eslint \"src/**/*.{ts,tsx}\" --fix"
   },
   "dependencies": {
+    "@dagrejs/dagre": "^1.0.2",
     "@kaoto-next/camel-catalog": "workspace:*",
     "@kie-tools/uniforms-patternfly": "^0.31.0",
     "@patternfly/patternfly": "^5.0.0",
@@ -32,6 +33,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",
+    "reactflow": "^11.8.3",
     "simple-zustand-devtools": "^1.1.0",
     "uniforms": "^4.0.0-alpha.0",
     "uniforms-bridge-json-schema": "^4.0.0-alpha.0",

packages/ui/src/components/Visualization/Visualization.tsx

@@ -1,60 +1,10 @@
-import { Button, Modal } from '@patternfly/react-core';
-import { FunctionComponent, PropsWithChildren, useCallback, useState } from 'react';
-import { CamelRoute, Step } from '../../camel-entities';
-import { getCamelRandomId } from '../../camel-utils/camel-random-id';
-import { Catalog, ITile } from '../Catalog';
-import { VisualizationCanvas } from './VisualizationCanvas';
-import './VisualizationCanvas.scss';
+import { FunctionComponent, PropsWithChildren } from 'react';
+import './Visualization.scss';
 
 interface CanvasProps {
   className?: string;
-  tiles: Record<string, ITile[]>;
 }
 
 export const Visualization: FunctionComponent<PropsWithChildren<CanvasProps>> = (props) => {
-  const [entities, setEntities] = useState<CamelRoute[]>([]);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [selectedCamelEntity, setSelectedCamelEntity] = useState<CamelRoute | undefined>(undefined);
-
-  const onTileClick = useCallback(
-    (tile: ITile) => {
-      if (selectedCamelEntity === undefined) {
-        return;
-      }
-
-      setIsModalOpen(false);
-      const firstStep = new Step({ name: tile.name });
-      selectedCamelEntity._addStep(firstStep);
-      setEntities([...entities, selectedCamelEntity]);
-    },
-    [entities, selectedCamelEntity],
-  );
-
-  const handleModalToggle = useCallback(() => {
-    setIsModalOpen(!isModalOpen);
-  }, [isModalOpen]);
-
-  return (
-    <div className={`canvasSurface ${props.className ?? ''}`}>
-      <VisualizationCanvas
-        contextToolbar={
-          <Button
-            onClick={() => {
-              setIsModalOpen(true);
-              const newEntity = new CamelRoute();
-              newEntity.id = getCamelRandomId('route');
-              setSelectedCamelEntity(newEntity);
-            }}
-          >
-            New Camel route
-          </Button>
-        }
-        entities={entities}
-      />
-
-      <Modal title="Catalog browser" isOpen={isModalOpen} onClose={handleModalToggle} ouiaId="BasicModal">
-        <Catalog tiles={props.tiles} onTileClick={onTileClick} />
-      </Modal>
-    </div>
-  );
+  return <div className={`canvasSurface ${props.className ?? ''}`}>Visualization</div>;
 };