Backwards compatibility for edited/deleted components in model view

app/javascript/projects/model_view.tsx

@@ -1,4 +1,4 @@
-import { debounce, every } from 'lodash'
+import { debounce } from 'lodash'
 import * as React from 'react'
 import { Engine, NodeEditor } from 'rete'
 import ConnectionPlugin from 'rete-connection-plugin'
@@ -94,6 +94,7 @@ export function ModelView({ visible, initialTransform, setTransform, initialMode
     )
 
     if (initialModel !== null) {
+      setModel(updateForBackwardsCompatibility(initialModel, editor.components))
       editor.fromJSON(initialModel).then(addNodeSyncListeners).then(addWriteModelListener)
     }
     else {
@@ -170,5 +171,60 @@ export function ModelView({ visible, initialTransform, setTransform, initialMode
     editor?.nodes.forEach(node => editor.view?.updateConnections({ node }))
   }, [editor, visible])
 
-  return <div className={`model-editor bg-dark flex-grow-1 ${!visible ? "d-none" : ""}`} ref={ref}></div>
+      return <div className={`model-editor bg-dark flex-grow-1 ${!visible ? "d-none" : ""}`} ref={ref}></div>
+    }
+
+function updateForBackwardsCompatibility(initialModel: Data, components: any): Data {
+
+  let model = initialModel;
+  let nodeNames = Object.keys(model.nodes)
+  let activeComponents = Array.from(components.keys())
+  let inactiveComponents: number[] = []
+
+  // remove and log any components that have been deleted/updated
+  for (let i = 0; i < nodeNames.length; i++) {
+    let node = model.nodes[nodeNames[i]]
+    if(!activeComponents.includes(node.name)) {
+      inactiveComponents.push(node.id)
+      delete model.nodes[nodeNames[i]]
+      nodeNames[i] = "deleted"
+    }
+  }
+
+  // remove any connections that are connected to deleted/updated components
+  if(inactiveComponents.length > 0) {
+    for (let i = 0; i < nodeNames.length; i++) {
+      if(nodeNames[i] !== "deleted") {
+        let node = model.nodes[nodeNames[i]]
+        let inputs = Object.keys(node.inputs)
+        let outputs = Object.keys(node.outputs)
+
+        for (let j = 0; j < inputs.length; j++) {
+          let input = node.inputs[inputs[j]]
+          input.connections.forEach((connection: any, index: number) => {
+            if(inactiveComponents.includes(connection.node)) {
+              input.connections.splice(index, 1)
+            }
+          })
+          model.nodes[nodeNames[i]].inputs[inputs[j]] = input
+        }
+
+
+        for (let j = 0; j < outputs.length; j++) {
+          let output = node.outputs[outputs[j]]
+          output.connections.forEach((connection: any, index: number) => {
+            if(inactiveComponents.includes(connection.node)) {
+              output.connections.splice(index, 1)
+            }
+          })
+          model.nodes[nodeNames[i]].outputs[outputs[j]] = output
+        }
+
+
+      }
+
+    }
+  }
+
+  return model
 }