add insert function

zndraw/app.py

@@ -343,3 +343,8 @@ def draw_schema():
 @io.on("atoms:delete")
 def delete_atoms(data):
     emit("atoms:delete", data, broadcast=True, include_self=False)
+
+
+@io.on("atoms:insert")
+def insert_atoms(data):
+    emit("atoms:insert", data, broadcast=True, include_self=False)

zndraw/static/pycom/Cache.js

@@ -121,6 +121,35 @@ class Cache {
       ).innerHTML = `${slider.value} / ${slider.max}`;
     });
 
+    this._socket.on("atoms:insert", (data) => {
+      // move all keys after id one step forward
+      const remainingKeys = Object.keys(this._cache);
+      const id = parseInt(Object.keys(data)[0]);
+      for (let i = remainingKeys.length - 1; i >= id; i--) {
+        const currentKey = remainingKeys[i];
+        const newIndex = i + 1;
+        this._cache[newIndex] = this._cache[currentKey];
+        delete this._cache[currentKey];
+      }
+      // insert new atoms
+      this._cache[id] = new Atoms({
+        positions: data[id].positions,
+        cell: data[id].cell,
+        numbers: data[id].numbers,
+        colors: data[id].colors,
+        radii: data[id].radii,
+        connectivity: data[id].connectivity,
+        calc: data[id].calc,
+        pbc: data[id].pbc,
+      });
+      // update slider
+      const slider = document.getElementById("frame-slider");
+      slider.max = Object.keys(this._cache).length - 1;
+      document.getElementById(
+        "info",
+      ).innerHTML = `${slider.value} / ${slider.max}`;
+    });
+
     this._socket.on("atoms:download", (ids) => {
       // send all atoms at once
       const data = {};

zndraw/zndraw.py

@@ -173,7 +173,9 @@ def display(self, index):
 
     def insert(self, index, value):
         """Insert atoms before index"""
-        raise NotImplementedError
+        self.socket.emit("atoms:insert", {index: atoms_to_json(value)})
+        if self.display_new:
+            self.display(index)
 
     def append(self, value: ase.Atoms) -> None:
         """Append atoms to the end of the list"""