Extracted edge config loading into a function

src/Visualizer/helpers/loadEdgeConfigs.ts

@@ -0,0 +1,23 @@
+import fullTableName from "./fullTableName";
+
+interface EdgeConfig {
+  source: string
+  sourceKey: string;
+  target: string;
+  targetKey: string;
+  relation: string;
+  sourcePosition?: string;
+  targetPosition?: string;
+}
+
+const loadEdgeConfigs = (edgeConfigs: EdgeConfig[]) => {
+  edgeConfigs.forEach(edgeConfig => {
+    const sourceTableName = fullTableName(edgeConfig.source);
+    const targetTableName = fullTableName(edgeConfig.target);
+
+    edgeConfig.source = sourceTableName;
+    edgeConfig.target = targetTableName;
+  });
+}
+
+export default loadEdgeConfigs;

src/Visualizer/index.tsx

@@ -35,11 +35,14 @@ import edgeClassName from "./helpers/edgeClassName";
 import edgeMarkerName from "./helpers/edgeMarkerName";
 import calculateTargetPosition from "./helpers/calculateTargetPosition";
 import calculateSourcePosition from "./helpers/calculateSourcePosition";
+import loadEdgeConfigs from "./helpers/loadEdgeConfigs";
 
 // this is important! You need to import the styles from the lib to make it work
 import "reactflow/dist/style.css";
 import "./Style";
 
+loadEdgeConfigs(edgeConfigs);
+
 interface Position {
   x: number;
   y: number;
@@ -82,14 +85,6 @@ tables.forEach(table => {
   initialNodes.push(tableDefinition);
 });
 
-edgeConfigs.forEach(edgeConfig => {
-  const sourceTableName = fullTableName(edgeConfig.source);
-  const targetTableName = fullTableName(edgeConfig.target);
-
-  edgeConfig.source = sourceTableName;
-  edgeConfig.target = targetTableName;
-})
-
 function Flow() {
   const store = useStoreApi();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars