From 5c0974864b633a61448a8e3e0441c6f33efb4228 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Mon, 27 Oct 2025 15:37:37 +0300
Subject: [PATCH 01/33] feat: implement packet filter & tests

---
 front/src/static/netfront_f.js     | 65 ++++++++++++++++++++++-
 front/src/templates/base.html      | 20 ++++++-
 front/tests/test_packet_filters.py | 84 ++++++++++++++++++++++++++++++
 3 files changed, 166 insertions(+), 3 deletions(-)
 create mode 100644 front/tests/test_packet_filters.py

diff --git a/front/src/static/netfront_f.js b/front/src/static/netfront_f.js
index b256d592..0a53bd8a 100644
--- a/front/src/static/netfront_f.js
+++ b/front/src/static/netfront_f.js
@@ -4,7 +4,14 @@ let global_eh = undefined;
 var NetworkUpdateTimeoutId = -1;
 let NetworkCache = [];
 
-const uid = function(){
+let packets_not_filtered = null;
+let filterState = {
+    hideARP: false,
+    hideSTP: false,
+}
+
+
+const uid = function () {
     return Date.now().toString(36) + Math.random().toString(36).substr(2);
 }
 
@@ -1276,7 +1283,10 @@ const CheckSimulation = function (simulation_id)
             {
                 packets = JSON.parse(data.packets);
                 pcaps = data.pcaps;
-                SetNetworkPlayerState(0);
+
+                // Set filters
+                packets_not_filtered = null;
+                SetPacketFilter();
 
                 const answerButton = document.querySelector('button[name="answerQuestion"]');
                 if (answerButton) {
@@ -1798,6 +1808,56 @@ const RunSimulation = function (network_guid)
     });
 }
 
+
+const FilterPackets = function () {
+    if (filterState.hideARP)
+        packets = packets.map((step) =>
+            step.filter((pkt) =>
+                !(pkt.data.label.startsWith('ARP'))
+            )
+        ).filter(step => step.length > 0);
+
+
+    if (filterState.hideSTP)
+        packets = packets.map((step) =>
+            step.filter((pkt) =>
+                !(pkt.data.label.startsWith('STP') ||
+                    pkt.data.label.startsWith('RSTP'))
+            )
+        ).filter(step => step.length > 0);
+    console.log("filterState:", filterState);
+    console.log("Packets after filters:", packets);
+
+}
+
+const RecoverFilterStates = function () {
+    $("#ARPFilterCheckbox").prop('checked', filterState.hideARP);
+    $("#STPFilterCheckbox").prop('checked', filterState.hideSTP);
+}
+
+const SetPacketFilter = function () {
+    console.log("Packet filter call");
+    // SetPacketFilter first call on emulated network
+    if (packets && !packets_not_filtered) {
+        packets_not_filtered = JSON.parse(JSON.stringify(packets)); // Array deep copy
+    }
+    // Numerous filter call, we grab our packets copy to filter it
+    else if (packets_not_filtered) {
+        packets = JSON.parse(JSON.stringify(packets_not_filtered));
+    }
+
+    filterState.hideARP = $('#ARPFilterCheckbox').is(':checked');
+    filterState.hideSTP = $('#STPFilterCheckbox').is(':checked');
+
+    console.log("filterState after filter call:", filterState);
+    if (packets) {
+        console.log('packets here');
+        FilterPackets();
+
+        SetNetworkPlayerState(0);
+    }
+}
+
 // 2 states:
 // Do we need emulation
 // We have a packets and ready to play packets
@@ -1807,6 +1867,7 @@ const SetNetworkPlayerState = function(simultaion_id)
     // Reset?
     if (simultaion_id === -1){
         packets = null;
+        packets_not_filtered = null;
         pcaps = [];
         SetNetworkPlayerState(0);
         return;
diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index 7e97ccda..d57daadb 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -133,6 +133,18 @@ <h5 class="modal-title" id="netConfigModalLabel">Настройки сети</h5
                             <label for="network_description" class="text-sm pt-2">Описание сети</label>
                             <textarea rows="3" class="form-control form-control-sm" id="network_description" name="network_description">{{ network.description }}</textarea>
                         </div>
+                        <hr class="my-3">
+                        <div>
+                            <h6>Настройки анимации</h6>
+                            <div>
+                                <input class="form-check-input" role="switch" type="checkbox" id="ARPFilterCheckbox" name="ARPFilterCheckbox">
+                                <label for="ARPFilterCheckbox"> Пропустить ARP пакеты </label>
+                            </div>
+                            <div>
+                                <input class="form-check-input" role="switch" type="checkbox" id="STPFilterCheckbox" name="STPFilterCheckbox">
+                                <label for="STPFilterCheckbox"> Пропустить STP/RSTP пакеты </label>
+                            </div>
+                        </div>
                     </form>
                 </div>
                 <div class="modal-footer">
@@ -279,7 +291,11 @@ <h6 class="mb-2">Наше компьюнити</h6>
 
 <script>
     $(document).ready(function() {
-        $("#networkConfigrationCancel").click(function(){
+        $("#netConfigModal").on("hidden.bs.modal", function() {
+            RecoverFilterStates();
+        })
+
+        $("#networkConfigurationCancel").click(function(){
             $('#netConfigModal').modal('hide');
         });
 
@@ -291,6 +307,7 @@ <h6 class="mb-2">Наше компьюнити</h6>
             network_title = $("#network_title").val();
             network_description = $("#network_description").val();
             UpdateNetworkConfig();
+            SetPacketFilter();
             $('#netConfigModal').modal('hide');
             $('#network_title_head').text(network_title);
         });
@@ -301,6 +318,7 @@ <h6 class="mb-2">Наше компьюнити</h6>
                 network_title = $("#network_title").val();
                 network_description = $("#network_description").val();
                 UpdateNetworkConfig();
+                SetPacketFilter();
                 $('#netConfigModal').modal('hide');
                 $('#network_title_head').text(network_title);
                 return false;
diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
new file mode 100644
index 00000000..00c31212
--- /dev/null
+++ b/front/tests/test_packet_filters.py
@@ -0,0 +1,84 @@
+import pytest
+
+from conftest import MiminetTester
+from utils.networks import MiminetTestNetwork
+
+
+class TestPacketFilters:
+    @pytest.fixture(scope="class")
+    def network(self, selenium: MiminetTester):
+        test_network = MiminetTestNetwork(selenium)
+
+        yield test_network
+
+        test_network.delete()
+
+    def test_filter_does_not_restore_packets_after_reset(
+        self, selenium: MiminetTester, network: MiminetTestNetwork
+    ):
+        selenium.get(network.url)
+
+        # prepare cached packets and drop active player state, emulating SetNetworkPlayerState(-1)
+        result = selenium.execute_script(
+            """
+            packets_not_filtered = [[{
+                data: { id: 'pkt_1', label: 'ARP Broadcast', type: 'arp' },
+                config: { path: 'edge_1', source: 'host_1', target: 'host_2' }
+            }]];
+            packets = null;
+            filterState.hideARP = false;
+            filterState.hideSTP = false;
+
+            try {
+                SetPacketFilter();
+                return {
+                    packets: packets,
+                    cachedPacketsLength: packets_not_filtered.length
+                };
+            } catch (err) {
+                return { error: err.toString() };
+            }
+            """
+        )
+
+        assert "error" not in result, f"JS error while filtering: {result['error']}"
+        assert result["packets"] is None, "Stale packets resurrected after reset"
+        assert (
+            result["cachedPacketsLength"] == 1
+        ), "Cache with original packets must stay untouched"
+
+    def test_empty_packets_do_not_break_player(
+        self, selenium: MiminetTester, network: MiminetTestNetwork
+    ):
+        selenium.get(network.url)
+
+        result = selenium.execute_script(
+            """
+            packets = [];
+            filterState.hideARP = true;
+            filterState.hideSTP = true;
+
+            try {
+                SetPacketFilter();
+                var slider = $('#PacketSliderInput')[0];
+                return {
+                    packets: packets,
+                    sliderInitialized: Boolean(slider && slider.noUiSlider),
+                    sliderVisible: slider ? $('#PacketSliderInput').is(':visible') : null,
+                    labelText: $('#NetworkPlayerLabel').text()
+                };
+            } catch (err) {
+                return { error: err.toString() };
+            }
+            """
+        )
+
+        assert "error" not in result, f"Packet filtering threw an error: {result['error']}"
+        assert result["packets"] == [], "Filtered packets should stay empty"
+        assert (
+            result["sliderInitialized"] is False or result["sliderVisible"] is False
+        ), "Slider must be hidden or uninitialized when nothing to play"
+        assert result["labelText"] in (
+            "",
+            "0 пакетов",
+        ), "Player label must reflect the empty state"

From 22783f95eeb4b269c80ad1047bb399eb54307caf Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Tue, 28 Oct 2025 12:13:24 +0300
Subject: [PATCH 02/33] fix: filterState not initialized in tests

---
 front/tests/test_packet_filters.py | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index 00c31212..eaf06e75 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -17,6 +17,12 @@ def test_filter_does_not_restore_packets_after_reset(
         self, selenium: MiminetTester, network: MiminetTestNetwork
     ):
         selenium.get(network.url)
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return typeof SetPacketFilter === 'function' && typeof filterState !== 'undefined';"
+            ),
+            timeout=10,
+        )
 
         # prepare cached packets and drop active player state, emulating SetNetworkPlayerState(-1)
         result = selenium.execute_script(
@@ -51,6 +57,12 @@ def test_empty_packets_do_not_break_player(
         self, selenium: MiminetTester, network: MiminetTestNetwork
     ):
         selenium.get(network.url)
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return typeof SetPacketFilter === 'function' && typeof filterState !== 'undefined';"
+            ),
+            timeout=10,
+        )
 
         result = selenium.execute_script(
             """

From 78afb0b9c7123b49c2ef449cbe6e7715b22de6d8 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Wed, 29 Oct 2025 09:00:56 +0300
Subject: [PATCH 03/33] fix: fixed tests

---
 front/tests/test_packet_filters.py | 186 +++++++++++++++++++----------
 1 file changed, 124 insertions(+), 62 deletions(-)

diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index eaf06e75..e2438a9f 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -1,6 +1,8 @@
 import pytest
+from selenium.webdriver.common.by import By
 
 from conftest import MiminetTester
+from utils.locators import Location
 from utils.networks import MiminetTestNetwork
 
 
@@ -8,89 +10,149 @@ class TestPacketFilters:
     @pytest.fixture(scope="class")
     def network(self, selenium: MiminetTester):
         test_network = MiminetTestNetwork(selenium)
-
         yield test_network
-
         test_network.delete()
 
-    def test_filter_does_not_restore_packets_after_reset(
-        self, selenium: MiminetTester, network: MiminetTestNetwork
-    ):
-        selenium.get(network.url)
+    def _wait_filter_state_ready(self, selenium: MiminetTester):
         selenium.wait_for(
             lambda driver: driver.execute_script(
-                "return typeof SetPacketFilter === 'function' && typeof filterState !== 'undefined';"
-            ),
-            timeout=10,
+                "return typeof filterState !== 'undefined' && "
+                "typeof SetPacketFilter === 'function';"
+            )
         )
 
-        # prepare cached packets and drop active player state, emulating SetNetworkPlayerState(-1)
-        result = selenium.execute_script(
+    def _open_settings_modal(self, selenium: MiminetTester):
+        selenium.find_element(
+            By.CSS_SELECTOR, Location.Network.TopButton.OPTIONS.selector
+        ).click()
+        selenium.wait_until_appear(By.CSS_SELECTOR, "#netConfigModal")
+
+    def _close_settings_modal(self, selenium: MiminetTester):
+        selenium.execute_script("$('#netConfigModal').modal('hide');")
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return !document.querySelector('#netConfigModal')"
+                " || $('#netConfigModal').is(':hidden');"
+            )
+        )
+
+    def _checkbox_state(self, selenium: MiminetTester, checkbox_id: str):
+        return selenium.execute_script(
+            f"var el = document.getElementById('{checkbox_id}');"
+            "return el ? el.checked : null;"
+        )
+
+    def _prepare_packets(self, selenium: MiminetTester, labels: list[str]):
+        selenium.execute_script(
             """
-            packets_not_filtered = [[{
-                data: { id: 'pkt_1', label: 'ARP Broadcast', type: 'arp' },
-                config: { path: 'edge_1', source: 'host_1', target: 'host_2' }
-            }]];
-            packets = null;
             filterState.hideARP = false;
             filterState.hideSTP = false;
-
-            try {
-                SetPacketFilter();
-                return {
-                    packets: packets,
-                    cachedPacketsLength: packets_not_filtered.length
-                };
-            } catch (err) {
-                return { error: err.toString() };
-            }
+            packets_not_filtered = null;
+            packets = arguments[0].map(function(label){ return [{ data: { label: label } }]; });
+            pcaps = [];
             """
+            ,
+            labels,
+        )
+
+    def test_enable_arp_filter_filters_packets(
+        self, selenium: MiminetTester, network: MiminetTestNetwork
+    ):
+        selenium.get(network.url)
+        self._wait_filter_state_ready(selenium)
+
+        self._prepare_packets(
+            selenium, ["ARP Request: who-has 10.0.0.1", "ICMP Echo Reply"]
+        )
+
+        self._open_settings_modal(selenium)
+        arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
+        if not arp_checkbox.is_selected():
+            arp_checkbox.click()
+        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
+        self._close_settings_modal(selenium)
+
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return filterState.hideARP === true"
+                " && Array.isArray(packets)"
+                " && packets.length === 1"
+                " && packets[0].length === 1"
+                " && !packets[0][0].data.label.startsWith('ARP');"
+            )
         )
 
-        assert "error" not in result, f"JS error while filtering: {result['error']}"
-        assert result["packets"] is None, "Stale packets resurrected after reset"
+        filtered_packets = selenium.execute_script("return packets;")
+        assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
+
+        self._open_settings_modal(selenium)
         assert (
-            result["cachedPacketsLength"] == 1
-        ), "Cache with original packets must stay untouched"
+            self._checkbox_state(selenium, "ARPFilterCheckbox") is True
+        ), "ARP checkbox should remain selected after saving"
+        self._close_settings_modal(selenium)
 
-    def test_empty_packets_do_not_break_player(
+    def test_cancel_does_not_change_filter_state(
         self, selenium: MiminetTester, network: MiminetTestNetwork
     ):
         selenium.get(network.url)
+        self._wait_filter_state_ready(selenium)
+
+        initial_state = selenium.execute_script("return filterState.hideARP === true;")
+
+        self._open_settings_modal(selenium)
+        arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
+        arp_checkbox.click()  # toggle current state
+        self._close_settings_modal(selenium)
+
+        current_state = selenium.execute_script("return filterState.hideARP === true;")
+        assert (
+            current_state == initial_state
+        ), "Filter state must not change when closing without saving"
+
+        self._open_settings_modal(selenium)
+        assert (
+            self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state
+        ), "ARP checkbox should display the original value after cancel"
+        self._close_settings_modal(selenium)
+
+    def test_enable_stp_filter_filters_packets(
+        self, selenium: MiminetTester, network: MiminetTestNetwork
+    ):
+        selenium.get(network.url)
+        self._wait_filter_state_ready(selenium)
+
+        self._prepare_packets(
+            selenium,
+            [
+                "STP Configuration BPDU",
+                "RSTP Topology Change",
+                "ICMP Echo Reply",
+            ],
+        )
+
+        self._open_settings_modal(selenium)
+        stp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#STPFilterCheckbox")
+        if not stp_checkbox.is_selected():
+            stp_checkbox.click()
+        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
+        self._close_settings_modal(selenium)
+
         selenium.wait_for(
             lambda driver: driver.execute_script(
-                "return typeof SetPacketFilter === 'function' && typeof filterState !== 'undefined';"
-            ),
-            timeout=10,
+                "return filterState.hideSTP === true"
+                " && Array.isArray(packets)"
+                " && packets.length === 1"
+                " && packets[0].length === 1"
+                " && !packets[0][0].data.label.startsWith('STP')"
+                " && !packets[0][0].data.label.startsWith('RSTP');"
+            )
         )
 
-        result = selenium.execute_script(
-            """
-            packets = [];
-            filterState.hideARP = true;
-            filterState.hideSTP = true;
-
-            try {
-                SetPacketFilter();
-                var slider = $('#PacketSliderInput')[0];
-                return {
-                    packets: packets,
-                    sliderInitialized: Boolean(slider && slider.noUiSlider),
-                    sliderVisible: slider ? $('#PacketSliderInput').is(':visible') : null,
-                    labelText: $('#NetworkPlayerLabel').text()
-                };
-            } catch (err) {
-                return { error: err.toString() };
-            }
-            """
-        )
+        filtered_packets = selenium.execute_script("return packets;")
+        assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
 
-        assert "error" not in result, f"Packet filtering threw an error: {result['error']}"
-        assert result["packets"] == [], "Filtered packets should stay empty"
+        self._open_settings_modal(selenium)
         assert (
-            result["sliderInitialized"] is False or result["sliderVisible"] is False
-        ), "Slider must be hidden or uninitialized when nothing to play"
-        assert result["labelText"] in (
-            "",
-            "0 пакетов",
-        ), "Player label must reflect the empty state"
+            self._checkbox_state(selenium, "STPFilterCheckbox") is True
+        ), "STP checkbox should remain selected after saving"
+        self._close_settings_modal(selenium)

From 713460860804c1c7ce09a569b1f69cc014ebdbbf Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Wed, 29 Oct 2025 11:10:10 +0300
Subject: [PATCH 04/33] style

---
 front/tests/test_packet_filters.py | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index e2438a9f..c57c63aa 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -50,8 +50,7 @@ def _prepare_packets(self, selenium: MiminetTester, labels: list[str]):
             packets_not_filtered = null;
             packets = arguments[0].map(function(label){ return [{ data: { label: label } }]; });
             pcaps = [];
-            """
-            ,
+            """,
             labels,
         )
 

From 70755791f554095c520f3198ed640a10681ccac1 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Wed, 29 Oct 2025 12:17:54 +0300
Subject: [PATCH 05/33] refactor: test_filter refactor

---
 front/tests/test_packet_filters.py | 47 ++++++++++++++++--------------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index c57c63aa..125816e8 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -27,8 +27,7 @@ def _open_settings_modal(self, selenium: MiminetTester):
         ).click()
         selenium.wait_until_appear(By.CSS_SELECTOR, "#netConfigModal")
 
-    def _close_settings_modal(self, selenium: MiminetTester):
-        selenium.execute_script("$('#netConfigModal').modal('hide');")
+    def _wait_modal_closed(self, selenium: MiminetTester):
         selenium.wait_for(
             lambda driver: driver.execute_script(
                 "return !document.querySelector('#netConfigModal')"
@@ -68,8 +67,8 @@ def test_enable_arp_filter_filters_packets(
         arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
         if not arp_checkbox.is_selected():
             arp_checkbox.click()
-        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
-        self._close_settings_modal(selenium)
+        selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationSubmit").click()
+        self._wait_modal_closed(selenium)
 
         selenium.wait_for(
             lambda driver: driver.execute_script(
@@ -85,10 +84,11 @@ def test_enable_arp_filter_filters_packets(
         assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
 
         self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "ARPFilterCheckbox") is True
-        ), "ARP checkbox should remain selected after saving"
-        self._close_settings_modal(selenium)
+        assert self._checkbox_state(selenium, "ARPFilterCheckbox") is True, (
+            "ARP checkbox should remain selected after saving"
+        )
+        selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationCancel").click()
+        self._wait_modal_closed(selenium)
 
     def test_cancel_does_not_change_filter_state(
         self, selenium: MiminetTester, network: MiminetTestNetwork
@@ -101,18 +101,20 @@ def test_cancel_does_not_change_filter_state(
         self._open_settings_modal(selenium)
         arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
         arp_checkbox.click()  # toggle current state
-        self._close_settings_modal(selenium)
+        selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationCancel").click()
+        self._wait_modal_closed(selenium)
 
         current_state = selenium.execute_script("return filterState.hideARP === true;")
-        assert (
-            current_state == initial_state
-        ), "Filter state must not change when closing without saving"
+        assert current_state == initial_state, (
+            "Filter state must not change when closing without saving"
+        )
 
         self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state
-        ), "ARP checkbox should display the original value after cancel"
-        self._close_settings_modal(selenium)
+        assert self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state, (
+            "ARP checkbox should display the original value after cancel"
+        )
+        selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationCancel").click()
+        self._wait_modal_closed(selenium)
 
     def test_enable_stp_filter_filters_packets(
         self, selenium: MiminetTester, network: MiminetTestNetwork
@@ -133,8 +135,8 @@ def test_enable_stp_filter_filters_packets(
         stp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#STPFilterCheckbox")
         if not stp_checkbox.is_selected():
             stp_checkbox.click()
-        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
-        self._close_settings_modal(selenium)
+        selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationSubmit").click()
+        self._wait_modal_closed(selenium)
 
         selenium.wait_for(
             lambda driver: driver.execute_script(
@@ -151,7 +153,8 @@ def test_enable_stp_filter_filters_packets(
         assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
 
         self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "STPFilterCheckbox") is True
-        ), "STP checkbox should remain selected after saving"
-        self._close_settings_modal(selenium)
+        assert self._checkbox_state(selenium, "STPFilterCheckbox") is True, (
+            "STP checkbox should remain selected after saving"
+        )
+        selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationCancel").click()
+        self._wait_modal_closed(selenium)

From 7443eb83203e5d43fc4f09b7af287a253dac5c73 Mon Sep 17 00:00:00 2001
From: pechenb <romkor2006@gmail.com>
Date: Wed, 29 Oct 2025 12:24:59 +0300
Subject: [PATCH 06/33] style

---
 front/tests/test_packet_filters.py | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index 125816e8..cfd3b60e 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -84,9 +84,9 @@ def test_enable_arp_filter_filters_packets(
         assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
 
         self._open_settings_modal(selenium)
-        assert self._checkbox_state(selenium, "ARPFilterCheckbox") is True, (
-            "ARP checkbox should remain selected after saving"
-        )
+        assert (
+            self._checkbox_state(selenium, "ARPFilterCheckbox") is True
+        ), "ARP checkbox should remain selected after saving"
         selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationCancel").click()
         self._wait_modal_closed(selenium)
 
@@ -105,14 +105,14 @@ def test_cancel_does_not_change_filter_state(
         self._wait_modal_closed(selenium)
 
         current_state = selenium.execute_script("return filterState.hideARP === true;")
-        assert current_state == initial_state, (
-            "Filter state must not change when closing without saving"
-        )
+        assert (
+            current_state == initial_state
+        ), "Filter state must not change when closing without saving"
 
         self._open_settings_modal(selenium)
-        assert self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state, (
-            "ARP checkbox should display the original value after cancel"
-        )
+        assert (
+            self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state
+        ), "ARP checkbox should display the original value after cancel"
         selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationCancel").click()
         self._wait_modal_closed(selenium)
 
@@ -153,8 +153,8 @@ def test_enable_stp_filter_filters_packets(
         assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
 
         self._open_settings_modal(selenium)
-        assert self._checkbox_state(selenium, "STPFilterCheckbox") is True, (
-            "STP checkbox should remain selected after saving"
-        )
+        assert (
+            self._checkbox_state(selenium, "STPFilterCheckbox") is True
+        ), "STP checkbox should remain selected after saving"
         selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationCancel").click()
         self._wait_modal_closed(selenium)

From c950c612ea0f94028234045c82806b81097c49ea Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Wed, 29 Oct 2025 12:49:42 +0300
Subject: [PATCH 07/33] fix: tests

---
 front/tests/test_packet_filters.py | 48 ++++++++++++++----------------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index cfd3b60e..db16dc11 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -27,7 +27,8 @@ def _open_settings_modal(self, selenium: MiminetTester):
         ).click()
         selenium.wait_until_appear(By.CSS_SELECTOR, "#netConfigModal")
 
-    def _wait_modal_closed(self, selenium: MiminetTester):
+    def _close_settings_modal(self, selenium: MiminetTester):
+        selenium.execute_script("$('#netConfigModal').modal('hide');")
         selenium.wait_for(
             lambda driver: driver.execute_script(
                 "return !document.querySelector('#netConfigModal')"
@@ -67,8 +68,8 @@ def test_enable_arp_filter_filters_packets(
         arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
         if not arp_checkbox.is_selected():
             arp_checkbox.click()
-        selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationSubmit").click()
-        self._wait_modal_closed(selenium)
+        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
+        self._close_settings_modal(selenium)
 
         selenium.wait_for(
             lambda driver: driver.execute_script(
@@ -84,11 +85,10 @@ def test_enable_arp_filter_filters_packets(
         assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
 
         self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "ARPFilterCheckbox") is True
-        ), "ARP checkbox should remain selected after saving"
-        selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationCancel").click()
-        self._wait_modal_closed(selenium)
+        assert self._checkbox_state(selenium, "ARPFilterCheckbox") is True, (
+            "ARP checkbox should remain selected after saving"
+        )
+        self._close_settings_modal(selenium)
 
     def test_cancel_does_not_change_filter_state(
         self, selenium: MiminetTester, network: MiminetTestNetwork
@@ -101,20 +101,18 @@ def test_cancel_does_not_change_filter_state(
         self._open_settings_modal(selenium)
         arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
         arp_checkbox.click()  # toggle current state
-        selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationCancel").click()
-        self._wait_modal_closed(selenium)
+        self._close_settings_modal(selenium)
 
         current_state = selenium.execute_script("return filterState.hideARP === true;")
-        assert (
-            current_state == initial_state
-        ), "Filter state must not change when closing without saving"
+        assert current_state == initial_state, (
+            "Filter state must not change when closing without saving"
+        )
 
         self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state
-        ), "ARP checkbox should display the original value after cancel"
-        selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationCancel").click()
-        self._wait_modal_closed(selenium)
+        assert self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state, (
+            "ARP checkbox should display the original value after cancel"
+        )
+        self._close_settings_modal(selenium)
 
     def test_enable_stp_filter_filters_packets(
         self, selenium: MiminetTester, network: MiminetTestNetwork
@@ -135,8 +133,8 @@ def test_enable_stp_filter_filters_packets(
         stp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#STPFilterCheckbox")
         if not stp_checkbox.is_selected():
             stp_checkbox.click()
-        selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationSubmit").click()
-        self._wait_modal_closed(selenium)
+        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
+        self._close_settings_modal(selenium)
 
         selenium.wait_for(
             lambda driver: driver.execute_script(
@@ -153,8 +151,8 @@ def test_enable_stp_filter_filters_packets(
         assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
 
         self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "STPFilterCheckbox") is True
-        ), "STP checkbox should remain selected after saving"
-        selenium.find_element(By.CSS_SELECTOR, "#networkConfigrationCancel").click()
-        self._wait_modal_closed(selenium)
+        assert self._checkbox_state(selenium, "STPFilterCheckbox") is True, (
+            "STP checkbox should remain selected after saving"
+        )
+        self._close_settings_modal(selenium)
+

From 2d3b3b39946c6d2ce1bd46e24fe80144645ce6b0 Mon Sep 17 00:00:00 2001
From: pechenb <romkor2006@gmail.com>
Date: Wed, 29 Oct 2025 12:58:29 +0300
Subject: [PATCH 08/33] style

---
 front/tests/test_packet_filters.py | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index db16dc11..c3cc3d16 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -70,7 +70,6 @@ def test_enable_arp_filter_filters_packets(
             arp_checkbox.click()
         selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
         self._close_settings_modal(selenium)
-
         selenium.wait_for(
             lambda driver: driver.execute_script(
                 "return filterState.hideARP === true"
@@ -85,9 +84,9 @@ def test_enable_arp_filter_filters_packets(
         assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
 
         self._open_settings_modal(selenium)
-        assert self._checkbox_state(selenium, "ARPFilterCheckbox") is True, (
-            "ARP checkbox should remain selected after saving"
-        )
+        assert (
+            self._checkbox_state(selenium, "ARPFilterCheckbox") is True
+        ), "ARP checkbox should remain selected after saving"
         self._close_settings_modal(selenium)
 
     def test_cancel_does_not_change_filter_state(
@@ -104,14 +103,14 @@ def test_cancel_does_not_change_filter_state(
         self._close_settings_modal(selenium)
 
         current_state = selenium.execute_script("return filterState.hideARP === true;")
-        assert current_state == initial_state, (
-            "Filter state must not change when closing without saving"
-        )
+        assert (
+            current_state == initial_state
+        ), "Filter state must not change when closing without saving"
 
         self._open_settings_modal(selenium)
-        assert self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state, (
-            "ARP checkbox should display the original value after cancel"
-        )
+        assert (
+            self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state
+        ), "ARP checkbox should display the original value after cancel"
         self._close_settings_modal(selenium)
 
     def test_enable_stp_filter_filters_packets(
@@ -151,8 +150,7 @@ def test_enable_stp_filter_filters_packets(
         assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
 
         self._open_settings_modal(selenium)
-        assert self._checkbox_state(selenium, "STPFilterCheckbox") is True, (
-            "STP checkbox should remain selected after saving"
-        )
+        assert (
+            self._checkbox_state(selenium, "STPFilterCheckbox") is True
+        ), "STP checkbox should remain selected after saving"
         self._close_settings_modal(selenium)
-

From be3ae9e8f2954fcd7d41e3abfee65271825716cf Mon Sep 17 00:00:00 2001
From: pechenb <romkor2006@gmail.com>
Date: Wed, 29 Oct 2025 13:16:52 +0300
Subject: [PATCH 09/33] feat: implement packet filter & tests for it

---
 front/src/static/netfront_f.js     | 3734 ++++++++++++++--------------
 front/src/templates/base.html      |   20 +-
 front/tests/test_packet_filters.py |  156 ++
 3 files changed, 2055 insertions(+), 1855 deletions(-)
 create mode 100644 front/tests/test_packet_filters.py

diff --git a/front/src/static/netfront_f.js b/front/src/static/netfront_f.js
index b256d592..6f86c54d 100644
--- a/front/src/static/netfront_f.js
+++ b/front/src/static/netfront_f.js
@@ -4,2223 +4,2249 @@ let global_eh = undefined;
 var NetworkUpdateTimeoutId = -1;
 let NetworkCache = [];
 
-const uid = function(){
-    return Date.now().toString(36) + Math.random().toString(36).substr(2);
-}
+let packets_not_filtered = null;
+let filterState = {
+  hideARP: false,
+  hideSTP: false,
+};
 
-const HostUid = function(){
+const uid = function () {
+  return Date.now().toString(36) + Math.random().toString(36).substr(2);
+};
 
-    let host_name = "host_";
+const HostUid = function () {
+  let host_name = "host_";
 
-    for (let host_number = 1; host_number < 100; host_number++) {
-        host = host_name + host_number;
+  for (let host_number = 1; host_number < 100; host_number++) {
+    host = host_name + host_number;
 
-        t = nodes.find(t => t.data.id === host);
+    t = nodes.find((t) => t.data.id === host);
 
-        if (!t)
-        {
-            return host;
-        }
+    if (!t) {
+      return host;
     }
+  }
 
-    return "host_" + uid();
-}
-
-const RouterUid = function(){
+  return "host_" + uid();
+};
 
-    let host_name = "router_";
+const RouterUid = function () {
+  let host_name = "router_";
 
-    for (let host_number = 1; host_number < 100; host_number++) {
-        host = host_name + host_number;
+  for (let host_number = 1; host_number < 100; host_number++) {
+    host = host_name + host_number;
 
-        t = nodes.find(t => t.data.id === host);
+    t = nodes.find((t) => t.data.id === host);
 
-        if (!t)
-        {
-            return host;
-        }
+    if (!t) {
+      return host;
     }
+  }
 
-    return "router_" + uid();
-}
-
-const ServerUid = function(){
+  return "router_" + uid();
+};
 
-    let host_name = "server_";
+const ServerUid = function () {
+  let host_name = "server_";
 
-    for (let host_number = 1; host_number < 100; host_number++) {
-        host = host_name + host_number;
+  for (let host_number = 1; host_number < 100; host_number++) {
+    host = host_name + host_number;
 
-        let t = nodes.find(t => t.data.id === host);
+    let t = nodes.find((t) => t.data.id === host);
 
-        if (!t)
-        {
-            return host;
-        }
+    if (!t) {
+      return host;
     }
+  }
 
-    return "server_" + uid();
-}
+  return "server_" + uid();
+};
 
 const ActionWithInterface = function (n, i, fun) {
+  let iface_id = n.interface[i].id;
 
-    let iface_id = n.interface[i].id;
+  if (!iface_id) {
+    return;
+  }
 
-    if (!iface_id){
-        return;
-    }
+  let connect_id = n.interface[i].connect;
 
-    let connect_id = n.interface[i].connect;
+  if (!connect_id) {
+    return;
+  }
 
-    if (!connect_id){
-        return;
-    }
+  let edge = edges.find((e) => e.data.id === connect_id);
 
-    let edge = edges.find(e => e.data.id === connect_id);
+  if (!edge) {
+    return;
+  }
 
-    if (!edge){
-        return;
-    }
+  let source_host = edge.data.source;
+  let target_host = edge.data.target;
 
-    let source_host = edge.data.source;
-    let target_host = edge.data.target;
+  if (!source_host || !target_host) {
+    return;
+  }
 
-    if (!source_host || !target_host){
-        return;
-    }
+  let connected_to = target_host;
+  if (n.data.id === target_host) {
+    connected_to = source_host;
+  }
 
-    let connected_to = target_host;
-    if (n.data.id === target_host){
-        connected_to = source_host;
-    }
+  let connected_to_host = nodes.find((n) => n.data.id === connected_to);
+  let connected_to_host_label = "Unknown";
 
-    let connected_to_host = nodes.find(n => n.data.id === connected_to);
-    let connected_to_host_label = "Unknown";
+  if (connected_to_host) {
+    connected_to_host_label = connected_to_host.data.label;
+  }
 
-    if (connected_to_host){
-        connected_to_host_label = connected_to_host.data.label;
-    }
+  ip_addr = n.interface[i].ip;
 
-    ip_addr = n.interface[i].ip;
+  if (!ip_addr) {
+    ip_addr = "";
+  }
 
-    if (!ip_addr){
-        ip_addr = '';
-    }
+  netmask = n.interface[i].netmask;
 
-    netmask = n.interface[i].netmask;
+  if (!netmask) {
+    netmask = "";
+  }
 
-    if (!netmask){
-        netmask = '';
-    }
+  fun(iface_id, ip_addr, netmask, connected_to_host_label);
+};
 
-    fun(iface_id, ip_addr, netmask, connected_to_host_label);
+const ShowHostConfig = function (n, shared = 0) {
+  let hostname = n.config.label;
+  hostname = hostname || n.data.id;
 
-}
+  // Create form
+  if (shared) {
+    SharedConfigHostForm(n.data.id);
+  } else {
+    ConfigHostForm(n.data.id);
+  }
 
-const ShowHostConfig = function(n, shared = 0){
+  // Add hostname
+  ConfigHostName(hostname);
 
-    let hostname = n.config.label;
-    hostname = hostname || n.data.id;
+  // Add jobs
+  let host_jobs = [];
 
-    // Create form
-    if (shared){
-        SharedConfigHostForm(n.data.id);
-    } else {
-        ConfigHostForm(n.data.id);
-    }
+  if (jobs) {
+    host_jobs = jobs.filter((j) => j.host_id === n.data.id);
+  }
 
-    // Add hostname
-    ConfigHostName(hostname);
+  ConfigHostJob(host_jobs, shared);
 
-    // Add jobs
-    let host_jobs = [];
+  // Add interfaces
+  $.each(n.interface, function (i) {
+    ActionWithInterface(n, i, ConfigHostInterface);
+  });
 
-    if (jobs){
-        host_jobs = jobs.filter(j => j.host_id === n.data.id);
-    }
+  if (n.interface.length) {
+    let default_gw = "";
 
-    ConfigHostJob(host_jobs, shared);
+    if ("default_gw" in n.config) {
+      default_gw = n.config.default_gw;
+    }
 
-    // Add interfaces
-    $.each(n.interface, function(i) {
-        ActionWithInterface(n, i, ConfigHostInterface)
-    });
+    ConfigHostGateway(default_gw);
+  }
 
-    if(n.interface.length)
-    {
-        let default_gw = '';
+  if (shared) {
+    DisableFormInputs();
+  }
+};
 
-        if ("default_gw" in n.config){
-            default_gw = n.config.default_gw;
-        }
+const ShowRouterConfig = function (n, shared = 0) {
+  let hostname = n.config.label;
+  hostname = hostname || n.data.id;
 
-        ConfigHostGateway(default_gw);
-    }
+  // Create form
+  if (shared) {
+    SharedConfigRouterForm(n.data.id);
+  } else {
+    ConfigRouterForm(n.data.id);
+  }
 
-    if (shared){
-        DisableFormInputs();
-    }
-}
+  // Add hostname
+  ConfigRouterName(hostname);
 
-const ShowRouterConfig = function(n, shared = 0){
+  // Add jobs
+  let router_jobs = [];
 
-    let hostname = n.config.label;
-    hostname = hostname || n.data.id;
+  if (jobs) {
+    router_jobs = jobs.filter((j) => j.host_id === n.data.id);
+  }
 
-    // Create form
-    if (shared){
-        SharedConfigRouterForm(n.data.id)
-    } else {
-        ConfigRouterForm(n.data.id);
-    }
+  ConfigRouterJob(router_jobs, shared);
 
-    // Add hostname
-    ConfigRouterName(hostname);
+  // Add interfaces
+  $.each(n.interface, function (i) {
+    ActionWithInterface(n, i, ConfigRouterInterface);
+  });
 
-    // Add jobs
-    let router_jobs = [];
+  if (n.interface.length) {
+    let default_gw = "";
 
-    if (jobs){
-        router_jobs = jobs.filter(j => j.host_id === n.data.id);
+    if ("default_gw" in n.config) {
+      default_gw = n.config.default_gw;
     }
 
-    ConfigRouterJob(router_jobs, shared);
+    ConfigRouterGateway(default_gw);
+  }
 
-    // Add interfaces
-    $.each(n.interface, function (i) {
-        ActionWithInterface(n, i, ConfigRouterInterface)
-    });
+  ConfigVxlan(n);
 
-    if(n.interface.length)
-    {
-        let default_gw = '';
+  if (shared) {
+    DisableFormInputs();
+    DisableVXLANInputs(n);
+  }
+};
 
-        if ("default_gw" in n.config){
-            default_gw = n.config.default_gw;
-        }
+const ShowServerConfig = function (n, shared = 0) {
+  let hostname = n.config.label;
+  hostname = hostname || n.data.id;
 
-        ConfigRouterGateway(default_gw);
-    }
+  // Create form
+  if (shared) {
+    SharedConfigServerForm(n.data.id);
+  } else {
+    ConfigServerForm(n.data.id);
+  }
 
-    ConfigVxlan(n);
+  // Add hostname
+  ConfigServerName(hostname);
 
-    if (shared){
-        DisableFormInputs();
-        DisableVXLANInputs(n);
-    }
-}
-
-const ShowServerConfig = function(n, shared = 0){
+  // Add jobs
+  let host_jobs = [];
 
-    let hostname = n.config.label;
-    hostname = hostname || n.data.id;
+  if (jobs) {
+    host_jobs = jobs.filter((j) => j.host_id === n.data.id);
+  }
 
-    // Create form
-    if (shared){
-        SharedConfigServerForm(n.data.id);
-    } else {
-        ConfigServerForm(n.data.id);
-    }
+  ConfigServerJob(host_jobs, shared);
 
-    // Add hostname
-    ConfigServerName(hostname);
+  // Add interfaces
+  $.each(n.interface, function (i) {
+    ActionWithInterface(n, i, ConfigServerInterface);
+  });
 
-    // Add jobs
-    let host_jobs = [];
+  if (n.interface.length) {
+    let default_gw = "";
 
-    if (jobs){
-        host_jobs = jobs.filter(j => j.host_id === n.data.id);
+    if ("default_gw" in n.config) {
+      default_gw = n.config.default_gw;
     }
 
-    ConfigServerJob(host_jobs, shared);
+    ConfigServerGateway(default_gw);
+  }
 
-    // Add interfaces
-    $.each(n.interface, function (i) {
-        ActionWithInterface(n, i, ConfigServerInterface)
-    });
+  if (shared) {
+    DisableFormInputs();
+  }
+};
 
-    if(n.interface.length)
-    {
-        let default_gw = '';
+const ShowHubConfig = function (n, shared = 0) {
+  let hostname = n.config.label;
+  hostname = hostname || n.data.id;
 
-        if ("default_gw" in n.config){
-            default_gw = n.config.default_gw;
-        }
+  // Create form
+  if (shared) {
+    SharedConfigHubForm(n.data.id);
+  } else {
+    ConfigHubForm(n.data.id);
+  }
 
-        ConfigServerGateway(default_gw);
-    }
+  // Add hostname
+  ConfigHubName(hostname);
 
-    if (shared){
-        DisableFormInputs();
-    }
-}
+  // Add interfaces
+  $.each(n.interface, function (i) {
+    ActionWithInterface(n, i, ConfigHubInterface);
+  });
+
+  if (n.interface.length) {
+    ConfigHubIndent();
+  }
 
-const ShowHubConfig = function(n, shared = 0){
+  if (shared) {
+    DisableFormInputs();
+  }
+};
 
-    let hostname = n.config.label;
-    hostname = hostname || n.data.id;
+const ShowSwitchConfig = function (n, shared = 0) {
+  let hostname = n.config.label;
+  hostname = hostname || n.data.id;
 
-    // Create form
-    if (shared){
-        SharedConfigHubForm(n.data.id);
-    } else {
-        ConfigHubForm(n.data.id);
-    }
+  // Create form
+  if (shared) {
+    SharedConfigSwitchForm(n.data.id);
+  } else {
+    ConfigSwitchForm(n.data.id);
+  }
 
-    // Add hostname
-    ConfigHubName(hostname);
+  // Add hostname
+  ConfigSwitchName(hostname);
 
-    // Add interfaces
-    $.each(n.interface, function (i) {
-        ActionWithInterface(n, i, ConfigHubInterface)
-    });
+  //Add checkbox STP
+  //    ConfigSwtichSTP(n.config.stp);
 
-    if(n.interface.length){
-        ConfigHubIndent();
-    }
+  //Add checkbox RSTP
+  //    ConfigSwtichRSTP(n.config.rstp);
+  ConfigRSTP(n);
 
-    if (shared){
-        DisableFormInputs();
-    }
-}
+  // Add VLAN
+  ConfigVLAN(n);
 
-const ShowSwitchConfig = function(n, shared = 0){
+  // Add interfaces
+  $.each(n.interface, function (i) {
+    ActionWithInterface(n, i, ConfigSwitchInterface);
+  });
 
-    let hostname = n.config.label;
-    hostname = hostname || n.data.id;
+  if (n.interface.length) {
+    ConfigSwitchIndent();
+  }
 
-    // Create form
-    if (shared){
-        SharedConfigSwitchForm(n.data.id);
-    } else {
-        ConfigSwitchForm(n.data.id);
-    }
+  if (shared) {
+    DisableFormInputs();
+    DisableVLANInputs(n);
+  }
+};
 
-    // Add hostname
-    ConfigSwitchName(hostname);
+const ShowEdgeConfig = function (edge_id, shared = 0) {
+  let ed = edges.find((ed) => ed.data.id === edge_id);
 
-    //Add checkbox STP
-//    ConfigSwtichSTP(n.config.stp);
+  if (!ed) {
+    return;
+  }
 
-    //Add checkbox RSTP
-//    ConfigSwtichRSTP(n.config.rstp);
-    ConfigRSTP(n);
+  let edge_source = ed.data.source;
+  let edge_target = ed.data.target;
+  let edge_loss = ed.data.loss_percentage || 0;
 
-    // Add VLAN
-    ConfigVLAN(n);
+  // Create form
+  if (shared) {
+    SharedConfigEdgeForm(edge_id);
+  } else {
+    ConfigEdgeForm(edge_id);
+  }
 
-    // Add interfaces
-    $.each(n.interface, function (i) {
-        ActionWithInterface(n, i, ConfigSwitchInterface)
-    });
+  // Add loss percentage info
+  ConfigEdgePercentage(edge_loss);
 
-    if(n.interface.length){
-        ConfigSwitchIndent();
-    }
+  // Add source and target info
+  ConfigEdgeEndpoints(edge_source, edge_target);
 
-    if (shared){
-        DisableFormInputs();
-        DisableVLANInputs(n);
-    }
-}
+  if (shared) {
+    DisableFormInputs();
+  }
+};
 
-const ShowEdgeConfig = function(edge_id, shared = 0){
+const PacketUid = function () {
+  return "pkt_" + uid();
+};
 
-    let ed = edges.find(ed => ed.data.id === edge_id);
+const l1HubUid = function () {
+  let hub_name = "l1hub";
 
-    if (!ed){
-        return;
-    }
+  for (let hub_number = 1; hub_number < 100; hub_number++) {
+    hub = hub_name + hub_number;
 
-    let edge_source = ed.data.source;
-    let edge_target = ed.data.target;
-    let edge_loss = ed.data.loss_percentage || 0
+    t = nodes.find((t) => t.data.id === hub);
 
-    // Create form
-    if (shared){
-        SharedConfigEdgeForm(edge_id);
-    } else {
-        ConfigEdgeForm(edge_id);
+    if (!t) {
+      return hub;
     }
+  }
+
+  return "hub_" + uid();
+};
 
+const l2SwitchUid = function () {
+  let sw_name = "l2sw";
 
-    // Add loss percentage info
-    ConfigEdgePercentage(edge_loss)
+  for (let sw_number = 1; sw_number < 100; sw_number++) {
+    sw = sw_name + sw_number;
 
-    // Add source and target info
-    ConfigEdgeEndpoints(edge_source, edge_target);
+    t = nodes.find((t) => t.data.id === sw);
 
-    if (shared){
-        DisableFormInputs();
+    if (!t) {
+      return sw;
     }
-}
+  }
 
-const PacketUid = function(){
-    return "pkt_" + uid();
-}
+  return "sw_" + uid();
+};
 
-const l1HubUid = function(){
+const l2SwitchPortUid = function (switch_id) {
+  let t = nodes.find((t) => t.data.id === switch_id);
 
-    let hub_name = "l1hub";
+  if (!t) {
+    return -1;
+  }
 
-    for (let hub_number = 1; hub_number < 100; hub_number++) {
-        hub = hub_name + hub_number;
+  for (let port_number = 1; port_number < 128; port_number++) {
+    port = t.data.id + "_" + port_number;
 
-        t = nodes.find(t => t.data.id === hub);
+    let i = t.interface.find((i) => i.id === port);
 
-        if (!t)
-        {
-            return hub;
-        }
+    if (!i) {
+      return port;
     }
+  }
+};
 
-    return "hub_" + uid();
-}
-
-const l2SwitchUid = function(){
+const l1HubPortUid = function (hub_id) {
+  let t = nodes.find((t) => t.data.id === hub_id);
 
-    let sw_name = "l2sw";
+  if (!t) {
+    return -1;
+  }
 
-    for (let sw_number = 1; sw_number < 100; sw_number++) {
-        sw = sw_name + sw_number;
+  for (let port_number = 1; port_number < 128; port_number++) {
+    port = t.data.id + "_" + port_number;
 
-        t = nodes.find(t => t.data.id === sw);
+    let i = t.interface.find((i) => i.id === port);
 
-        if (!t)
-        {
-            return sw;
-        }
+    if (!i) {
+      return port;
     }
+  }
+};
 
-    return "sw_" + uid();
-}
+const EdgeUid = function () {
+  return "edge_" + uid();
+};
 
-const l2SwitchPortUid = function(switch_id){
+const InterfaceUid = function () {
+  return "iface_" + Math.random().toString(9).substring(2, 10);
+};
 
-    let t = nodes.find(t => t.data.id === switch_id);
+const PostNodesEdges = function () {
+  $.ajax({
+    type: "POST",
+    url: "/post_nodes_edges?guid=" + network_guid,
+    data: JSON.stringify([nodes, edges]),
+    success: function (data) {},
+    error: function (err) {
+      console.log("Cannot post edges to server");
+    },
+    contentType: "application/json",
+    dataType: "json",
+  });
+};
 
-    if (!t)
-    {
-        return -1;
-    }
+const AddEdge = function (source_id, target_id) {
+  let source_node = nodes.find((n) => n.data.id === source_id);
+  let target_node = nodes.find((n) => n.data.id === target_id);
 
-    for (let port_number = 1; port_number < 128; port_number++) {
-        port = t.data.id + "_" + port_number;
+  // Do we find nodes?
+  if (!source_node || !target_node) {
+    return;
+  }
+
+  // Save the network state.
+  SaveNetworkObject();
+
+  // Add edge
+  let edge_id = EdgeUid();
+
+  edges.push({
+    data: {
+      id: edge_id,
+      source: source_node.data.id,
+      target: target_node.data.id,
+    },
+  });
+
+  // Add interface If edge connects to host or to router or to server
+  if (
+    source_node.config.type === "host" ||
+    source_node.config.type === "router" ||
+    source_node.config.type === "server"
+  ) {
+    let iface_id = InterfaceUid();
+    source_node.interface.push({
+      id: iface_id,
+      name: iface_id,
+      connect: edge_id,
+    });
+  }
+
+  if (
+    target_node.config.type === "host" ||
+    target_node.config.type === "router" ||
+    target_node.config.type === "server"
+  ) {
+    let iface_id = InterfaceUid();
+    target_node.interface.push({
+      id: iface_id,
+      name: iface_id,
+      connect: edge_id,
+    });
+  }
 
-        let i = t.interface.find(i => i.id === port);
+  // Add interface if connected to switch
+  if (target_node.config.type === "l2_switch") {
+    var vlan = null;
+    var type_connection = null;
 
-        if (!i){
-            return port;
-        }
+    if (areInterfaceFieldsFilled(target_node)) {
+      vlan = 1;
+      type_connection = 0;
     }
-}
 
-const l1HubPortUid = function(hub_id){
+    let iface_id = l2SwitchPortUid(target_node.data.id);
+    target_node.interface.push({
+      id: iface_id,
+      name: iface_id,
+      connect: edge_id,
+      vlan: vlan,
+      type_connection: type_connection,
+    });
+  }
 
-    let t = nodes.find(t => t.data.id === hub_id);
+  if (source_node.config.type === "l2_switch") {
+    var vlan = null;
+    var type_connection = null;
 
-    if (!t)
-    {
-        return -1;
+    if (areInterfaceFieldsFilled(source_node)) {
+      vlan = 1;
+      type_connection = 0;
     }
 
-    for (let port_number = 1; port_number < 128; port_number++) {
-        port = t.data.id + "_" + port_number;
+    let iface_id = l2SwitchPortUid(source_node.data.id);
+    source_node.interface.push({
+      id: iface_id,
+      name: iface_id,
+      connect: edge_id,
+      vlan: vlan,
+      type_connection: type_connection,
+    });
+  }
+
+  // Add interface if connected to Hub
+  if (target_node.config.type === "l1_hub") {
+    let iface_id = l1HubPortUid(target_node.data.id);
+    target_node.interface.push({
+      id: iface_id,
+      name: iface_id,
+      connect: edge_id,
+    });
+  }
+
+  if (source_node.config.type === "l1_hub") {
+    let iface_id = l1HubPortUid(source_node.data.id);
+    source_node.interface.push({
+      id: iface_id,
+      name: iface_id,
+      connect: edge_id,
+    });
+  }
+};
 
-        let i = t.interface.find(i => i.id === port);
+const DeleteJob = function (node_id) {
+  let jobs_to_delete = [];
 
-        if (!i){
-            return port;
-        }
+  $.each(jobs, function (idx, job) {
+    if (!job) {
+      return;
     }
-}
-
-const EdgeUid = function(){
-    return "edge_" + uid();
-}
-
-const InterfaceUid = function(){
-    return "iface_" + Math.random().toString(9).substring(2, 10);
-}
-
-const PostNodesEdges = function(){
-    $.ajax({
-        type: 'POST',
-        url: '/post_nodes_edges?guid=' + network_guid,
-        data: JSON.stringify([nodes, edges]),
-        success: function(data) {},
-        error: function(err) {console.log('Cannot post edges to server')},
-        contentType: "application/json",
-        dataType: 'json'
-    });
-}
 
-const AddEdge = function(source_id, target_id){
+    if (job.host_id === node_id) {
+      jobs_to_delete.push(idx);
+    }
+  });
 
-        let source_node = nodes.find(n => n.data.id === source_id);
-        let target_node = nodes.find(n => n.data.id === target_id);
+  $.each(jobs_to_delete, function (idx, val) {
+    jobs.splice(val, 1);
+  });
+};
 
-        // Do we find nodes?
-        if (!source_node || !target_node)
-        {
-            return;
-        }
+const DeleteNode = function (node_id) {
+  // Find node in nodes
+  let n = nodes.find((n) => n.data.id === node_id);
 
-        // Save the network state.
-        SaveNetworkObject();
+  if (!n) {
+    return;
+  }
 
-        // Add edge
-        let edge_id = EdgeUid();
+  let edges_to_delete = [];
 
-        edges.push({
-            data: {
-                id: edge_id,
-                source: source_node.data.id,
-                target: target_node.data.id,
-            }
-        });
+  // Find all edges that connected to the deleted node
+  $.each(edges, function (idx, edge) {
+    if (!edge) {
+      return;
+    }
 
-        // Add interface If edge connects to host or to router or to server
-        if (source_node.config.type === 'host' || source_node.config.type === 'router' || source_node.config.type === 'server'){
-            let iface_id = InterfaceUid();
-            source_node.interface.push({
-                  id: iface_id,
-                  name: iface_id,
-                  connect: edge_id,
-            });
-        }
+    // Find the edge
+    if (edge.data.source === node_id) {
+      // Find the node on the other side
+      let t = nodes.find((t) => t.data.id === edge.data.target);
 
-        if (target_node.config.type === 'host' || target_node.config.type === 'router' || target_node.config.type === 'server'){
-            let iface_id = InterfaceUid();
-            target_node.interface.push({
-                id: iface_id,
-                name: iface_id,
-                connect: edge_id,
-            });
-        }
+      if (!t) {
+        console.log("We have an edge without target node");
+        return;
+      }
 
-        // Add interface if connected to switch
-        if (target_node.config.type === 'l2_switch'){
-            var vlan = null;
-            var type_connection = null;
-
-            if (areInterfaceFieldsFilled(target_node)) {
-                vlan = 1;
-                type_connection = 0;
-            }
-
-            let iface_id = l2SwitchPortUid(target_node.data.id);
-            target_node.interface.push({
-                id: iface_id,
-                name: iface_id,
-                connect: edge_id,
-                vlan: vlan,
-                type_connection: type_connection,
-            });
-        }
+      // Iterate interface and delete one
+      let new_iface = t.interface.filter(function (iface) {
+        return iface.connect !== edge.data.id;
+      });
 
-        if (source_node.config.type === 'l2_switch'){
-            var vlan = null;
-            var type_connection = null;
-
-            if (areInterfaceFieldsFilled(source_node)) {
-                vlan = 1;
-                type_connection = 0;
-            }
-
-            let iface_id = l2SwitchPortUid(source_node.data.id);
-            source_node.interface.push({
-                id: iface_id,
-                name: iface_id,
-                connect: edge_id,
-                vlan: vlan,
-                type_connection: type_connection,
-            });
-        }
+      t.interface = new_iface;
+      edges_to_delete.unshift(idx);
+      return;
+    }
 
-        // Add interface if connected to Hub
-        if (target_node.config.type === 'l1_hub'){
-            let iface_id = l1HubPortUid(target_node.data.id);
-            target_node.interface.push({
-                id: iface_id,
-                name: iface_id,
-                connect: edge_id,
-            });
-        }
+    if (edge.data.target === node_id) {
+      // Find the node on the other side
+      let t = nodes.find((t) => t.data.id === edge.data.source);
 
-        if (source_node.config.type === 'l1_hub'){
-            let iface_id = l1HubPortUid(source_node.data.id);
-            source_node.interface.push({
-                id: iface_id,
-                name: iface_id,
-                connect: edge_id,
-            });
-        }
-}
+      if (!t) {
+        console.log("We have an edge without target node");
+        return;
+      }
 
-const DeleteJob = function(node_id){
+      // Iterate interface and delete one
+      let new_iface = t.interface.filter(function (iface) {
+        return iface.connect !== edge.data.id;
+      });
 
-    let jobs_to_delete = [];
+      t.interface = new_iface;
+      edges_to_delete.unshift(idx);
+      return;
+    }
+  });
 
-    $.each(jobs , function(idx, job) {
+  $.each(edges_to_delete, function (idx, val) {
+    edges.splice(val, 1);
+  });
 
-        if (!job){
-            return;
-        }
+  // Delete the node
+  let node_index = nodes.findIndex((prop) => prop.data.id === node_id);
+  nodes.splice(node_index, 1);
+};
 
-        if (job.host_id === node_id){
-            jobs_to_delete.push(idx);
-        }
-    });
+const DeleteEdge = function (edge_id) {
+  let ed = edges.find((ed) => ed.data.id === edge_id);
 
-    $.each(jobs_to_delete, function (idx, val){
-        jobs.splice(val, 1);
-    });
-}
+  if (!ed) {
+    return;
+  }
 
-const DeleteNode = function(node_id) {
+  let connected_nodes = [ed.data.source, ed.data.target];
+  let iterator = connected_nodes.values();
 
-    // Find node in nodes
-    let n = nodes.find(n => n.data.id === node_id);
+  for (let node_id of iterator) {
+    let t = nodes.find((t) => t.data.id === node_id);
 
-    if (!n) {
-        return;
+    if (!t) {
+      console.log("We have an edge without target node");
+      continue;
     }
 
-    let edges_to_delete = [];
-
-    // Find all edges that connected to the deleted node
-    $.each(edges , function(idx, edge) {
-
-        if (!edge){
-            return;
-        }
-
-        // Find the edge
-        if (edge.data.source === node_id)
-        {
-            // Find the node on the other side
-            let t = nodes.find(t => t.data.id === edge.data.target);
-
-            if (!t){
-                console.log("We have an edge without target node");
-                return;
-            }
-
-            // Iterate interface and delete one
-            let new_iface = t.interface.filter(function( iface ) {
-                return iface.connect !== edge.data.id;
-            });
-
-            t.interface = new_iface;
-            edges_to_delete.unshift(idx);
-            return;
-        }
-
-        if (edge.data.target === node_id)
-        {
-            // Find the node on the other side
-            let t = nodes.find(t => t.data.id === edge.data.source);
+    // Iterate interface and delete one
+    let edge_node_iface = t.interface.filter(function (iface) {
+      return iface.connect !== edge_id;
+    });
 
-            if (!t){
-                console.log("We have an edge without target node");
-                return;
-            }
+    t.interface = edge_node_iface;
+  }
 
-            // Iterate interface and delete one
-            let new_iface = t.interface.filter(function( iface ) {
-                return iface.connect !== edge.data.id;
-            });
+  // Delete the edeg
+  let edge_index = edges.findIndex((prop) => prop.data.id === edge_id);
+  edges.splice(edge_index, 1);
+  return;
+};
 
-            t.interface = new_iface;
-            edges_to_delete.unshift(idx);
-            return;
-        }
+const PostNodes = function () {
+  $.ajax({
+    type: "POST",
+    url: "/post_network_nodes?guid=" + network_guid,
+    data: JSON.stringify(nodes),
+    success: function (data) {},
+    error: function (err) {
+      console.log("Cannot post nodes to server");
+    },
+    contentType: "application/json",
+    dataType: "json",
+  });
+};
 
-    });
+const MoveNodes = function () {
+  $.ajax({
+    type: "POST",
+    url: "/move_network_nodes?guid=" + network_guid,
+    data: JSON.stringify(nodes),
+    success: function (data) {},
+    error: function (err) {
+      console.log("Cannot post nodes to server");
+    },
+    contentType: "application/json",
+    dataType: "json",
+  });
+};
 
-    $.each(edges_to_delete, function (idx, val){
-        edges.splice(val, 1);
-    });
+const prepareStylesheet = function () {
+  const getColor = function (ele) {
+    if (ele.group() === "edges") {
+      const loss = ele.data("loss_percentage") || 0;
+      if (loss > 0) return "#FF8C00";
+    }
+    return ele.data("color") || "#9FBFE5";
+  };
+  const getEdgeLabel = function (ele) {
+    return ele.data("label") || "";
+  };
+  const getLineStyle = function (ele) {
+    return ele.data("line") || "solid";
+  };
+  const getCurveStyle = function (ele) {
+    return ele.data("style") || "bezier";
+  };
+  const getTextDirection = function (ele) {
+    return ele.data("direction") || "autorotate";
+  };
 
-    // Delete the node
-    let node_index = nodes.findIndex(prop => prop.data.id === node_id);
-    nodes.splice(node_index,1);
-}
+  const getNodeLabel = function (ele) {
+    let label = ele.data("label") || "";
+    let n = nodes.find((n) => n.data.id === ele.data("id"));
 
-const DeleteEdge = function (edge_id) {
+    if (!n) {
+      return label;
+    }
 
-    let ed = edges.find(ed => ed.data.id === edge_id);
+    $.each(n.interface, function (i) {
+      let ip_addr = n.interface[i].ip;
+      let netmask = n.interface[i].netmask;
 
-    if (!ed){
+      if (!ip_addr || !netmask) {
         return;
-    }
+      }
 
-    let connected_nodes = [ed.data.source, ed.data.target];
-    let iterator = connected_nodes.values();
+      label = label + "\n" + ip_addr + "/" + netmask;
+    });
 
-    for (let node_id of iterator){
-        let t = nodes.find(t => t.data.id === node_id);
+    if (n.config.default_gw) {
+      label = label + "\n" + "gw:" + n.config.default_gw;
+    }
 
-        if (!t){
-            console.log("We have an edge without target node");
-            continue;
-        }
+    $.each(jobs, function (i) {
+      let j = jobs[i];
 
-        // Iterate interface and delete one
-        let edge_node_iface = t.interface.filter(function( iface ) {
-            return iface.connect !== edge_id;
-        });
+      if (j.host_id === n.data.id) {
+        label = label + "\n" + "(" + j.print_cmd + ")";
+      }
+    });
 
-        t.interface = edge_node_iface;
-    }
+    return label;
+  };
 
-    // Delete the edeg
-    let edge_index = edges.findIndex(prop => prop.data.id === edge_id);
-    edges.splice(edge_index,1);
-    return;
-}
-
-const PostNodes = function(){
-    $.ajax({
-        type: 'POST',
-        url: '/post_network_nodes?guid=' + network_guid,
-        data: JSON.stringify(nodes),
-        success: function(data) {},
-        error: function(err) {console.log('Cannot post nodes to server')},
-        contentType: "application/json",
-        dataType: 'json'
+  let sheet = cytoscape
+    .stylesheet()
+    .selector("node")
+    .css({
+      height: 30,
+      width: 30,
+      "background-fit": "cover",
+      "border-color": "#000",
+      "border-width": 0,
+      content: getNodeLabel,
+      "text-valign": "top",
+      "text-align": "center",
+      "font-size": "8px",
+      "text-wrap": "wrap",
+    })
+    .selector("edge")
+    .css({
+      width: 2,
+      "target-arrow-shape": "none",
+      "line-color": getColor,
+      "target-arrow-color": getColor,
+      "curve-style": getCurveStyle,
+      label: getEdgeLabel,
+      "line-style": getLineStyle,
+      color: "#000",
+      "text-outline-color": "#FFF",
+      "text-outline-width": 1,
+      "edge-text-rotation": getTextDirection,
+    })
+    .selector(".eh-handle")
+    .css({
+      "background-color": "blue",
+      width: 8,
+      height: 8,
+      shape: "ellipse",
+      "overlay-opacity": 0,
+      "border-width": 4, // makes the handle easier to hit
+      "border-opacity": 0,
+    })
+
+    .selector(".eh-hover")
+    .css({
+      "background-color": "blue",
+    })
+
+    .selector(".eh-source")
+    .css({
+      "border-width": 2,
+      "border-color": "blue",
+    })
+
+    .selector(".eh-target")
+    .css({
+      "border-width": 2,
+      "border-color": "blue",
+    })
+
+    .selector(".eh-preview")
+    .css({
+      "background-color": "blue",
+      "line-color": "blue",
+      "target-arrow-color": "blue",
+      "source-arrow-color": "blue",
+    })
+
+    .selector(".eh-ghost-edge")
+    .css({
+      "background-color": "blue",
+      "line-color": "blue",
+      "target-arrow-color": "blue",
+      "source-arrow-color": "blue",
+    })
+
+    .selector("node[name]")
+    .css({
+      content: "data(name)",
+    })
+
+    .selector('node[type="packet"]')
+    .css({
+      content: "data(label)",
+      "text-valign": "top",
+      "text-align": "center",
+      height: "5px",
+      width: "5px",
+      "border-opacity": "0",
+      "border-width": "0px",
+      "text-wrap": "wrap",
+    })
+
+    .selector(".hidden")
+    .css({
+      display: "none",
+    })
+
+    .selector(".eh-ghost-edge.eh-preview-active")
+    .css({
+      opacity: 0,
     });
-}
-
-const MoveNodes = function(){
-
-    $.ajax({
-        type: 'POST',
-        url: '/move_network_nodes?guid=' + network_guid,
-        data: JSON.stringify(nodes),
-        success: function(data) {},
-        error: function(err) {console.log('Cannot post nodes to server')},
-        contentType: "application/json",
-        dataType: 'json'
+
+  const appendIconClass = function (stylesheet, cssClass) {
+    return stylesheet.selector("." + cssClass).css({
+      "background-image": DiagramIcons[cssClass],
+      "background-opacity": 0,
+      "border-width": 0,
+      "background-clip": "none",
     });
-}
-
-const prepareStylesheet = function() {
-    const getColor = function(ele) {
-        if (ele.group() === "edges") {
-            const loss = ele.data('loss_percentage') || 0;
-            if (loss > 0)
-                return '#FF8C00';
-        }
-        return ele.data('color') || '#9FBFE5';
-    };
-    const getEdgeLabel = function(ele) {
-      return ele.data('label') || '';
-    };
-    const getLineStyle = function(ele) {
-      return ele.data('line') || 'solid';
-    };
-    const getCurveStyle = function(ele) {
-      return ele.data('style') || 'bezier';
-    };
-    const getTextDirection = function(ele) {
-      return ele.data('direction') || 'autorotate';
-    };
-
-    const getNodeLabel = function(ele) {
-
-        let label = ele.data('label') || '';
-        let n = nodes.find(n => n.data.id === ele.data('id'));
-
-        if (!n){
-            return label;
-        }
+  };
 
-        $.each(n.interface, function (i) {
+  for (const prop in DiagramIcons) {
+    if (Object.prototype.hasOwnProperty.call(DiagramIcons, prop)) {
+      sheet = appendIconClass(sheet, prop);
+    }
+  }
 
-            let ip_addr = n.interface[i].ip;
-            let netmask = n.interface[i].netmask;
+  return sheet;
+};
 
-            if (!ip_addr || !netmask){
-                return;
-            }
+const DrawGraph = function () {
+  // Do we already have one?
+  let cy = undefined;
 
-            label = label + '\n' + ip_addr + "/" + netmask;
-        }
-        );
+  if (global_cy) {
+    cy = global_cy;
 
-        if (n.config.default_gw)
-        {
-            label = label + '\n' + 'gw:' + n.config.default_gw;
-        }
-
-        $.each(jobs, function (i) {
-            let j = jobs[i];
+    var collection = cy.elements();
+    cy.remove(collection);
+    cy.autounselectify(true);
+    cy.add(nodes);
+    cy.add(edges);
+    cy.nodes().grabify();
+    global_eh.enable();
+    return;
+  }
+
+  cy = cytoscape({
+    container: document.getElementById("network_scheme"),
+    boxSelectionEnabled: true,
+    autounselectify: true,
+    style: prepareStylesheet(),
+    elements: [],
+    layout: "preset",
+    zoom: network_zoom,
+    pan: { x: network_pan_x, y: network_pan_y },
+    fit: true,
+  });
+
+  global_cy = cy;
+
+  // the default values of each option are outlined below:
+  let defaults = {
+    canConnect: function (sourceNode, targetNode) {
+      // whether an edge can be created between source and target
+      return !sourceNode.same(targetNode); // e.g. disallow loops
+    },
+
+    edgeParams: function (sourceNode, targetNode) {
+      // for edges between the specified source and target
+      // return element object to be passed to cy.add() for edge
+      return {};
+    },
+
+    hoverDelay: 150, // time spent hovering over a target node before it is considered selected
+    snap: true, // when enabled, the edge can be drawn by just moving close to a target node (can be confusing on compound graphs)
+    snapThreshold: 50, // the target node must be less than or equal to this many pixels away from the cursor/finger
+    snapFrequency: 15, // the number of times per second (Hz) that snap checks done (lower is less expensive)
+    noEdgeEventsInDraw: true, // set events:no to edges during draws, prevents mouseouts on compounds
+    disableBrowserGestures: true, // during an edge drawing gesture, disable browser gestures such as two-finger trackpad swipe and pinch-to-zoom
+  };
 
-            if (j.host_id === n.data.id){
-                label = label + '\n' + '(' + j.print_cmd + ')';
-            }
+  global_eh = cy.edgehandles(defaults);
 
-        });
+  cy.minZoom(0.5);
+  cy.maxZoom(2);
 
-        return label;
-    };
-
-    let sheet = cytoscape.stylesheet()
-        .selector('node')
-        .css({
-          'height': 30,
-          'width': 30,
-          'background-fit': 'cover',
-          'border-color': '#000',
-          'border-width': 0,
-          'content': getNodeLabel,
-          'text-valign': 'top',
-          'text-align': 'center',
-          'font-size': '8px',
-          'text-wrap': 'wrap'
-        })
-        .selector('edge')
-        .css({
-          'width': 2,
-          'target-arrow-shape': 'none',
-          'line-color': getColor,
-          'target-arrow-color': getColor,
-          'curve-style': getCurveStyle,
-          'label': getEdgeLabel,
-          'line-style': getLineStyle,
-          'color': '#000',
-          'text-outline-color': '#FFF',
-          'text-outline-width': 1,
-          'edge-text-rotation': getTextDirection,
-        })
-        .selector('.eh-handle')
-        .css({
-            'background-color': 'blue',
-            'width': 8,
-            'height': 8,
-            'shape': 'ellipse',
-            'overlay-opacity': 0,
-            'border-width': 4, // makes the handle easier to hit
-            'border-opacity': 0
-        })
-
-        .selector('.eh-hover')
-        .css({
-            'background-color': 'blue'
-        })
-
-        .selector('.eh-source')
-        .css({
-            'border-width': 2,
-            'border-color': 'blue'
-        })
-
-        .selector('.eh-target')
-        .css({
-            'border-width': 2,
-            'border-color': 'blue'
-        })
-
-        .selector('.eh-preview')
-        .css({
-            'background-color': 'blue',
-            'line-color': 'blue',
-            'target-arrow-color': 'blue',
-            'source-arrow-color': 'blue'
-        })
-
-        .selector('.eh-ghost-edge')
-        .css({
-            'background-color': 'blue',
-            'line-color': 'blue',
-            'target-arrow-color': 'blue',
-            'source-arrow-color': 'blue'
-        })
-
-        .selector('node[name]')
-        .css({
-            'content': 'data(name)'
-        })
-
-        .selector('node[type="packet"]')
-        .css({
-            'content': 'data(label)',
-            'text-valign': 'top',
-            'text-align': 'center',
-            'height': '5px',
-            'width': '5px',
-            'border-opacity': '0',
-            'border-width': '0px',
-            'text-wrap': 'wrap'
-        })
-
-        .selector('.hidden')
-        .css({
-            'display': 'none'
-        })
-
-        .selector('.eh-ghost-edge.eh-preview-active')
-        .css({
-            'opacity': 0
-        });
+  cy.add(nodes);
+  cy.add(edges);
 
-    const appendIconClass = function(stylesheet, cssClass) {
-      return stylesheet.selector('.' + cssClass)
-          .css({
-            'background-image': DiagramIcons[cssClass],
-            'background-opacity': 0,
-            'border-width': 0,
-            'background-clip': 'none',
-          });
-    };
+  // Changing zoom
+  cy.on("zoom", function (evt) {
+    if (NetworkUpdateTimeoutId >= 0) {
+      clearTimeout(NetworkUpdateTimeoutId);
+      NetworkUpdateTimeoutId = -1;
+    }
 
-    for (const prop in DiagramIcons) {
+    NetworkUpdateTimeoutId = setTimeout(UpdateNetworkConfig, 2000);
+  });
 
-      if (Object.prototype.hasOwnProperty.call(DiagramIcons, prop)) {
-        sheet = appendIconClass(sheet, prop);
-      }
+  // Changing the pan
+  cy.on("pan", function (evt) {
+    if (NetworkUpdateTimeoutId >= 0) {
+      clearTimeout(NetworkUpdateTimeoutId);
+      NetworkUpdateTimeoutId = -1;
     }
 
-    return sheet;
-  };
+    NetworkUpdateTimeoutId = setTimeout(UpdateNetworkConfig, 2000);
+  });
 
-const DrawGraph = function() {
+  // Looking for a position changing
+  cy.on("dragfree", "node", function (evt) {
+    //let node_id = evt.target.id();
+    let n = nodes.find((n) => n.data.id === this.id());
 
-    // Do we already have one?
-    let cy = undefined;
+    if (!n) {
+      return;
+    }
 
-    if (global_cy)
-    {
-        cy = global_cy;
+    n.position.x = this.position().x;
+    n.position.y = this.position().y;
 
-        var collection = cy.elements();
-        cy.remove(collection);
-        cy.autounselectify(true);
-        cy.add(nodes);
-        cy.add(edges);
-        cy.nodes().grabify();
-        global_eh.enable();
-        return;
-    }
+    MoveNodes();
+    TakeGraphPictureAndUpdate();
+  });
 
-    cy = cytoscape({
-        container: document.getElementById("network_scheme"),
-        boxSelectionEnabled: true,
-        autounselectify: true,
-        style: prepareStylesheet(),
-        elements: [],
-        layout: 'preset',
-        zoom: network_zoom,
-        pan: { x: network_pan_x, y: network_pan_y },
-        fit: true,
-    });
+  // Click on object
+  cy.on("click", function (evt) {
+    let evtTarget = evt.target;
 
-    global_cy = cy;
+    // Is this cy ?
+    if (evtTarget === cy) {
+      ClearConfigForm("");
+      selecteed_node_id = 0;
+      selected_edge_id = 0;
+      return;
+    }
 
-    // the default values of each option are outlined below:
-    let defaults = {
-        canConnect: function( sourceNode, targetNode ){
+    // Is this edge ?
+    if (evtTarget.group() === "edges") {
+      selected_edge_id = evtTarget.data().id;
+      ShowEdgeConfig(selected_edge_id);
+      selecteed_node_id = 0;
+      return;
+    }
 
-            // whether an edge can be created between source and target
-        return !sourceNode.same(targetNode); // e.g. disallow loops
-        },
+    // Maybe host ?
+    var target_id = evt.target.id();
+    let n = nodes.find((n) => n.data.id === target_id);
 
-        edgeParams: function( sourceNode, targetNode ){
+    if (!n) {
+      return;
+    }
 
-            // for edges between the specified source and target
-            // return element object to be passed to cy.add() for edge
-            return {};
-        },
+    selecteed_node_id = n.data.id;
+    selected_edge_id = 0;
+
+    if (n.config.type === "host") {
+      ShowHostConfig(n);
+    } else if (n.config.type === "l1_hub") {
+      ShowHubConfig(n);
+    } else if (n.config.type === "l2_switch") {
+      ShowSwitchConfig(n);
+    } else if (n.config.type === "router") {
+      ShowRouterConfig(n);
+    } else if (n.config.type === "server") {
+      ShowServerConfig(n);
+    }
+  });
 
-        hoverDelay: 150, // time spent hovering over a target node before it is considered selected
-        snap: true, // when enabled, the edge can be drawn by just moving close to a target node (can be confusing on compound graphs)
-        snapThreshold: 50, // the target node must be less than or equal to this many pixels away from the cursor/finger
-        snapFrequency: 15, // the number of times per second (Hz) that snap checks done (lower is less expensive)
-        noEdgeEventsInDraw: true, // set events:no to edges during draws, prevents mouseouts on compounds
-        disableBrowserGestures: true // during an edge drawing gesture, disable browser gestures such as two-finger trackpad swipe and pinch-to-zoom
-    };
+  // Add edge to the edges[] and then save it to the server.
+  cy.on("ehcomplete", (event, sourceNode, targetNode, addedEdge) => {
+    AddEdge(sourceNode._private.data.id, targetNode._private.data.id);
+    PostNodesEdges();
+    TakeGraphPictureAndUpdate();
 
-    global_eh = cy.edgehandles(defaults);
+    SetNetworkPlayerState(-1);
+  });
 
-    cy.minZoom(0.5);
-    cy.maxZoom(2);
+  $(document).on("keyup", function (e) {
+    if (e.keyCode == 46 && selecteed_node_id) {
+      // Save the network state.
+      SaveNetworkObject();
 
-    cy.add(nodes);
-    cy.add(edges);
+      DeleteNode(selecteed_node_id);
+      DeleteJob(selecteed_node_id);
 
-    // Changing zoom
-    cy.on('zoom', function(evt){
+      ClearConfigForm("");
+      selecteed_node_id = 0;
+      selected_edge_id = 0;
 
-        if (NetworkUpdateTimeoutId >= 0){
-            clearTimeout(NetworkUpdateTimeoutId);
-            NetworkUpdateTimeoutId = -1;
-        }
+      PostNodesEdges(); // Update network on server
+      cy.elements().remove();
+      cy.add(nodes);
+      cy.add(edges);
 
-        NetworkUpdateTimeoutId = setTimeout(UpdateNetworkConfig, 2000);
-    });
+      TakeGraphPictureAndUpdate();
 
-    // Changing the pan
-    cy.on('pan', function(evt){
+      // Reset network state
+      SetNetworkPlayerState(-1);
+    }
+    if (e.keyCode == 46 && selected_edge_id) {
+      // Save the network state.
+      SaveNetworkObject();
 
-        if (NetworkUpdateTimeoutId >= 0){
-            clearTimeout(NetworkUpdateTimeoutId);
-            NetworkUpdateTimeoutId = -1;
-        }
+      DeleteEdge(selected_edge_id);
 
-        NetworkUpdateTimeoutId = setTimeout(UpdateNetworkConfig, 2000);
-    });
+      ClearConfigForm("");
+      selecteed_node_id = 0;
+      selected_edge_id = 0;
 
-    // Looking for a position changing
-    cy.on('dragfree', 'node', function(evt){
+      PostNodesEdges(); // Update network on server
+      cy.elements().remove();
+      cy.add(nodes);
+      cy.add(edges);
 
-        //let node_id = evt.target.id();
-        let n = nodes.find(n => n.data.id === this.id());
+      TakeGraphPictureAndUpdate();
 
-        if (!n) {
-            return;
-        }
+      // Reset network state
+      SetNetworkPlayerState(-1);
+    }
 
-        n.position.x = this.position().x;
-        n.position.y = this.position().y;
+    if (e.keyCode == 90 && e.ctrlKey) {
+      ClearConfigForm("");
+      selecteed_node_id = 0;
+      selected_edge_id = 0;
 
-        MoveNodes();
-        TakeGraphPictureAndUpdate();
-    });
+      RestoreNetworkObject();
 
-    // Click on object
-    cy.on('click', function (evt) {
+      PostNodesEdges(); // Update network on server
+      cy.elements().remove();
+      cy.add(nodes);
+      cy.add(edges);
 
-        let evtTarget = evt.target;
+      TakeGraphPictureAndUpdate();
 
-        // Is this cy ?
-        if (evtTarget === cy) {
-            ClearConfigForm('');
-            selecteed_node_id = 0;
-            selected_edge_id = 0;
-            return;
-        }
+      // Reset network state
+      SetNetworkPlayerState(-1);
+    }
+  });
+};
 
-        // Is this edge ?
-        if (evtTarget.group() === 'edges'){
-            selected_edge_id = evtTarget.data().id;
-            ShowEdgeConfig(selected_edge_id);
-            selecteed_node_id = 0;
-            return;
-        }
+const DrawGraphStatic = function (nodes, edges, shared = 0) {
+  // Do we already have one?
+  let cy = undefined;
 
-        // Maybe host ?
-        var target_id = evt.target.id();
-        let n = nodes.find(n => n.data.id === target_id);
+  let network_scheme_id = "network_scheme";
 
-        if (!n) {
-            return;
-        }
+  if (shared) {
+    network_scheme_id = "network_scheme_shared";
+  }
 
-        selecteed_node_id = n.data.id;
-        selected_edge_id = 0;
-
-        if (n.config.type === 'host'){
-            ShowHostConfig(n);
-        } else if (n.config.type === 'l1_hub'){
-            ShowHubConfig(n);
-        } else if (n.config.type === 'l2_switch'){
-            ShowSwitchConfig(n);
-        } else if (n.config.type === 'router'){
-            ShowRouterConfig(n);
-        } else if (n.config.type === 'server'){
-            ShowServerConfig(n);
-        }
+  if (global_cy) {
+    cy = global_cy;
+    cy.elements().remove();
+  } else {
+    cy = cytoscape({
+      container: document.getElementById(network_scheme_id),
+      boxSelectionEnabled: true,
+      autounselectify: false,
+      style: prepareStylesheet(),
+      elements: [],
+      layout: "preset",
+      zoom: network_zoom,
+      pan: { x: network_pan_x, y: network_pan_y },
+      fit: true,
     });
 
-    // Add edge to the edges[] and then save it to the server.
-    cy.on('ehcomplete', (event, sourceNode, targetNode, addedEdge) => {
-        AddEdge(sourceNode._private.data.id, targetNode._private.data.id);
-        PostNodesEdges();
-        TakeGraphPictureAndUpdate();
+    global_cy = cy;
+  }
+
+  // Turn off edges creation.
+  if (global_eh) {
+    global_eh.disable();
+  }
+
+  cy.autounselectify(false);
+  cy.add(nodes);
+  cy.add(edges);
+  cy.nodes().ungrabify();
+  return;
+};
+
+const DrawSharedGraph = function (nodes, edges) {
+  // Do we already have one?
+  let cy = undefined;
 
-        SetNetworkPlayerState(-1);
+  if (global_cy) {
+    cy = global_cy;
+    cy.elements().remove();
+  } else {
+    cy = cytoscape({
+      container: document.getElementById("network_scheme_shared"),
+      boxSelectionEnabled: true,
+      autounselectify: true,
+      style: prepareStylesheet(),
+      elements: [],
+      layout: "preset",
+      zoom: network_zoom,
+      pan: { x: network_pan_x, y: network_pan_y },
+      fit: true,
     });
 
-    $(document).on('keyup', function(e){
+    global_cy = cy;
+  }
 
-        if (e.keyCode == 46 && selecteed_node_id) {
+  cy.autounselectify(true);
 
-            // Save the network state.
-            SaveNetworkObject();
+  cy.minZoom(0.5);
+  cy.maxZoom(2);
 
-            DeleteNode(selecteed_node_id);
-            DeleteJob(selecteed_node_id);
+  cy.add(nodes);
+  cy.add(edges);
 
-            ClearConfigForm('');
-            selecteed_node_id = 0;
-            selected_edge_id = 0;
+  // Click on object
+  cy.on("click", function (evt) {
+    let evtTarget = evt.target;
+    if (evtTarget === cy) {
+      ClearConfigForm("");
+      selecteed_node_id = 0;
+      selected_edge_id = 0;
+      return;
+    }
 
-            PostNodesEdges();               // Update network on server
-            cy.elements().remove();
-            cy.add(nodes);
-            cy.add(edges);
+    // Is this edge ?
+    if (evtTarget.group() === "edges") {
+      selected_edge_id = evtTarget.data().id;
+      ShowEdgeConfig(selected_edge_id, 1);
+      selecteed_node_id = 0;
+      return;
+    }
 
-            TakeGraphPictureAndUpdate();
+    var target_id = evt.target.id();
+    let n = nodes.find((n) => n.data.id === target_id);
 
-            // Reset network state
-            SetNetworkPlayerState(-1);
-        }
-        if (e.keyCode ==  46 && selected_edge_id) {
+    if (!n) {
+      return;
+    }
 
-            // Save the network state.
-            SaveNetworkObject();
+    selecteed_node_id = n.data.id;
+    selected_edge_id = 0;
+
+    if (n.config.type === "host") {
+      ShowHostConfig(n, (shared = 1));
+    } else if (n.config.type === "l1_hub") {
+      ShowHubConfig(n, (shared = 1));
+    } else if (n.config.type === "l2_switch") {
+      ShowSwitchConfig(n, (shared = 1));
+    } else if (n.config.type === "router") {
+      ShowRouterConfig(n, (shared = 1));
+    } else if (n.config.type === "server") {
+      ShowServerConfig(n, (shared = 1));
+    }
+  });
+};
 
-            DeleteEdge(selected_edge_id);
+const DrawIndexGraphStatic = function (
+  nodes,
+  edges,
+  container_id,
+  graph_network_zoom,
+  graph_network_pan_x,
+  graph_network_pan_y
+) {
+  let index_cy = cytoscape({
+    container: document.getElementById(container_id),
+    boxSelectionEnabled: true,
+    autounselectify: false,
+    style: prepareStylesheet(),
+    elements: [],
+    layout: "preset",
+    zoom: graph_network_zoom,
+    pan: { x: graph_network_pan_x, y: graph_network_pan_y },
+    fit: true,
+  });
+
+  index_cy.autounselectify(false);
+
+  index_cy.add(nodes);
+  index_cy.add(edges);
+  index_cy.panningEnabled(false);
+
+  index_cy.nodes().ungrabify();
+  return index_cy;
+};
 
-            ClearConfigForm('');
-            selecteed_node_id = 0;
-            selected_edge_id = 0;
+// Check whether simulation is over and we can run packets
+const CheckSimulation = function (simulation_id) {
+  $.ajax({
+    type: "GET",
+    url:
+      "/check_simulation?simulation_id=" +
+      simulation_id +
+      "&network_guid=" +
+      network_guid,
+    data: "",
+    success: function (data, textStatus, xhr) {
+      // If we got 210 (processing) wait 2 sec and call themself again
+      if (xhr.status === 210) {
+        setTimeout(CheckSimulation, 2000, simulation_id);
+      }
 
-            PostNodesEdges();               // Update network on server
-            cy.elements().remove();
-            cy.add(nodes);
-            cy.add(edges);
+      // Simulation is ended up and we can grab the packets
+      if (xhr.status === 200) {
+        packets = JSON.parse(data.packets);
+        pcaps = data.pcaps;
 
-            TakeGraphPictureAndUpdate();
+        // Set filters
+        packets_not_filtered = null;
+        SetPacketFilter();
 
-            // Reset network state
-            SetNetworkPlayerState(-1);
+        const answerButton = document.querySelector(
+          'button[name="answerQuestion"]'
+        );
+        if (answerButton) {
+          answerButton.disabled = false;
         }
+      }
+    },
+    error: function (xhr) {
+      console.log("Cannot check simulation id = " + simulation_id);
+      SetNetworkPlayerState(-1);
+    },
+    contentType: "application/json",
+    dataType: "json",
+  });
+};
 
-        if (e.keyCode == 90 && e.ctrlKey){
+// Update edge configuration
+const UpdateEdgeConfiguration = (data) => {
+  SetNetworkPlayerState(-1);
+
+  return $.ajax({
+    type: "POST",
+    url: "/edge/save_config",
+    data: data,
+    complete: function () {
+      DrawGraph();
+      $("#config_edge_main_form_submit_button").html("Сохранить");
+    },
+    error: function (xhr) {
+      console.log("Не удалось обновить конфигурацию ребра");
+      console.log(xhr);
+    },
+    dataType: "json",
+  });
+};
 
-            ClearConfigForm('');
-            selecteed_node_id = 0;
-            selected_edge_id = 0;
+const InsertWaitingTime = function () {
+  // Get last emulation task time
+  // and send request to get count of emulating networks before this time
+  $.ajax({
+    type: "GET",
+    url: "emulation_queue/time",
+    data: "",
+    success: function (data) {
+      // Run helper function with time param
+      InsertWaitingTimeHelper(data.time);
+    },
+    error: function (err) {
+      console.error("Failed to fetch queue time:", err);
+    },
+    contentType: "application/json",
+    dataType: "json",
+  });
+};
 
-            RestoreNetworkObject();
+const InsertWaitingTimeHelper = function (time_filter) {
+  // Insert field with queue size
+  $.ajax({
+    type: "GET",
+    url: "emulation_queue/size?time-filter=" + time_filter.toString(),
+    data: "",
+    success: function (data) {
+      const queue_size = parseInt(data.size);
 
-            PostNodesEdges();               // Update network on server
-            cy.elements().remove();
-            cy.add(nodes);
-            cy.add(edges);
+      if ($("#NetworkPlayerLabel").text().startsWith("Шаг:")) {
+        return;
+      } else if (queue_size <= 1) {
+        $("#NetworkPlayerLabel").text("Ожидание 10-15 сек.");
+      } else {
+        $("#NetworkPlayerLabel").text(`Место в очереди ${queue_size}`);
 
-            TakeGraphPictureAndUpdate();
+        // Update waiting time
+        setTimeout(() => InsertWaitingTimeHelper(time_filter), 500);
+      }
+    },
+    error: function (err) {
+      console.error("Failed to fetch queue size:", err);
+    },
+    contentType: "application/json",
+    dataType: "json",
+  });
+};
 
-            // Reset network state
-            SetNetworkPlayerState(-1);
+// Update host configuration
+const UpdateHostConfiguration = function (data, host_id) {
+  // Reset network player
+  SetNetworkPlayerState(-1);
+
+  $.ajax({
+    type: "POST",
+    url: "/host/save_config",
+    data: data,
+    success: function (data, textStatus, xhr) {
+      if (xhr.status === 200) {
+        if (!data.warning) {
+          // Update nodes
+          nodes = data.nodes;
+
+          // Update jobs
+          jobs = data.jobs;
+
+          // Update graph
+          DrawGraph();
         }
 
-    });
-}
+        // Ok, let's try to update host config form
+        let n = nodes.find((n) => n.data.id === host_id);
 
-const DrawGraphStatic = function(nodes, edges, shared=0) {
+        if (!n) {
+          ClearConfigForm("Нет такого хоста");
+          return;
+        }
 
-    // Do we already have one?
-    let cy = undefined;
+        if (n.config.type === "host") {
+          ShowHostConfig(n);
+        } else {
+          ClearConfigForm("Узел есть, но это не хост");
+          return;
+        }
 
-    let network_scheme_id = "network_scheme";
+        if (data.warning) {
+          HostWarningMsg(data.warning);
+        }
+      }
+    },
+    error: function (xhr) {
+      console.log("Не удалось обновить конфигурацию хоста");
+      console.log(xhr);
+    },
+    dataType: "json",
+  });
+};
 
-    if (shared){
-        network_scheme_id = "network_scheme_shared";
-    }
+// Delete job from host
+const DeleteJobFromHost = function (host_id, job_id, network_guid) {
+  // Reset network player
+  SetNetworkPlayerState(-1);
 
-    if (global_cy)
-    {
-        cy = global_cy;
-        cy.elements().remove();
-    } else {
-        cy = cytoscape({
-            container: document.getElementById(network_scheme_id),
-            boxSelectionEnabled: true,
-            autounselectify: false,
-            style: prepareStylesheet(),
-            elements: [],
-            layout: 'preset',
-            zoom: network_zoom,
-            pan: { x: network_pan_x, y: network_pan_y },
-            fit: true,
-        });
+  let data = {
+    id: job_id,
+    guid: network_guid,
+  };
 
-         global_cy = cy;
-    }
+  $.ajax({
+    type: "POST",
+    url: "/host/delete_job",
+    data: data,
+    encode: true,
+    success: function (data, textStatus, xhr) {
+      if (xhr.status === 200) {
+        // Update jobs
+        jobs = data.jobs;
 
-    // Turn off edges creation.
-    if (global_eh){
-        global_eh.disable();
-    }
+        // Update graph
+        DrawGraph();
 
-    cy.autounselectify(false);
-    cy.add(nodes);
-    cy.add(edges);
-    cy.nodes().ungrabify();
-    return;
-}
-
-const DrawSharedGraph = function(nodes, edges) {
-
-    // Do we already have one?
-    let cy = undefined;
-
-    if (global_cy)
-    {
-        cy = global_cy;
-        cy.elements().remove();
-    } else {
-        cy = cytoscape({
-            container: document.getElementById("network_scheme_shared"),
-            boxSelectionEnabled: true,
-            autounselectify: true,
-            style: prepareStylesheet(),
-            elements: [],
-            layout: 'preset',
-            zoom: network_zoom,
-            pan: { x: network_pan_x, y: network_pan_y },
-            fit: true,
-        });
-
-        global_cy = cy;
-    }
+        // Ok, let's try to update host config form
+        let n = nodes.find((n) => n.data.id === host_id);
 
-    cy.autounselectify(true);
+        if (!n) {
+          ClearConfigForm("Нет такого хоста");
+          return;
+        }
 
-    cy.minZoom(0.5);
-    cy.maxZoom(2);
+        if (n.config.type === "host") {
+          ShowHostConfig(n);
+        } else {
+          ClearConfigForm("Узел есть, но это не хост");
+        }
+      }
+    },
+    error: function (xhr) {
+      console.log("Не удалось удалить команду");
+      console.log(xhr);
+    },
+    dataType: "json",
+  });
+};
 
-    cy.add(nodes);
-    cy.add(edges);
+// Delete job from router
+const DeleteJobFromRouter = function (router_id, job_id, network_guid) {
+  // Reset network player
+  SetNetworkPlayerState(-1);
 
-    // Click on object
-    cy.on('click', function (evt) {
+  let data = {
+    id: job_id,
+    guid: network_guid,
+  };
 
-        let evtTarget = evt.target;
-        if (evtTarget === cy) {
-            ClearConfigForm('');
-            selecteed_node_id = 0;
-            selected_edge_id = 0;
-            return;
-        }
+  $.ajax({
+    type: "POST",
+    url: "/host/delete_job",
+    data: data,
+    encode: true,
+    success: function (data, textStatus, xhr) {
+      if (xhr.status === 200) {
+        // Update jobs
+        jobs = data.jobs;
 
-        // Is this edge ?
-        if (evtTarget.group() === 'edges'){
-            selected_edge_id = evtTarget.data().id;
-            ShowEdgeConfig(selected_edge_id, 1);
-            selecteed_node_id = 0;
-            return;
-        }
+        // Update graph
+        DrawGraph();
 
-        var target_id = evt.target.id();
-        let n = nodes.find(n => n.data.id === target_id);
+        // Ok, let's try to update host config form
+        let n = nodes.find((n) => n.data.id === router_id);
 
         if (!n) {
-            return;
+          ClearConfigForm("Нет такого хоста");
+          return;
         }
 
-        selecteed_node_id = n.data.id;
-        selected_edge_id = 0;
-
-        if (n.config.type === 'host'){
-            ShowHostConfig(n, shared=1);
-        } else if (n.config.type === 'l1_hub'){
-            ShowHubConfig(n, shared=1);
-        } else if (n.config.type === 'l2_switch'){
-            ShowSwitchConfig(n, shared=1);
-        } else if (n.config.type === 'router'){
-            ShowRouterConfig(n, shared=1);
-        } else if (n.config.type === 'server'){
-            ShowServerConfig(n, shared=1);
+        if (n.config.type === "router") {
+          ShowRouterConfig(n);
+        } else {
+          ClearConfigForm("Узел есть, но это не раутер");
         }
-    });
-}
-
-const DrawIndexGraphStatic = function(nodes, edges, container_id, graph_network_zoom,
-                                    graph_network_pan_x, graph_network_pan_y)
-{
-
-    let index_cy = cytoscape({
-        container: document.getElementById(container_id),
-        boxSelectionEnabled: true,
-        autounselectify: false,
-        style: prepareStylesheet(),
-        elements: [],
-        layout: 'preset',
-        zoom: graph_network_zoom,
-            pan: { x: graph_network_pan_x, y: graph_network_pan_y },
-            fit: true,
-        });
+      }
+    },
+    error: function (xhr) {
+      console.log("Не удалось удалить команду");
+      console.log(xhr);
+    },
+    dataType: "json",
+  });
+};
 
-    index_cy.autounselectify(false);
+// Delete job from server
+const DeleteJobFromServer = function (server_id, job_id, network_guid) {
+  // Reset network player
+  SetNetworkPlayerState(-1);
 
-    index_cy.add(nodes);
-    index_cy.add(edges);
-    index_cy.panningEnabled(false);
+  let data = {
+    id: job_id,
+    guid: network_guid,
+  };
 
-    index_cy.nodes().ungrabify();
-    return index_cy;
-}
+  $.ajax({
+    type: "POST",
+    url: "/host/delete_job",
+    data: data,
+    encode: true,
+    success: function (data, textStatus, xhr) {
+      if (xhr.status === 200) {
+        // Update jobs
+        jobs = data.jobs;
 
-// Check whether simulation is over and we can run packets
-const CheckSimulation = function (simulation_id)
-{
-    $.ajax({
-        type: 'GET',
-        url: '/check_simulation?simulation_id=' + simulation_id + '&network_guid=' + network_guid,
-        data: '',
-        success: function(data, textStatus, xhr) {
-
-            // If we got 210 (processing) wait 2 sec and call themself again
-            if (xhr.status === 210)
-            {
-                setTimeout(CheckSimulation, 2000, simulation_id);
-            }
-
-            // Simulation is ended up and we can grab the packets
-            if (xhr.status === 200)
-            {
-                packets = JSON.parse(data.packets);
-                pcaps = data.pcaps;
-                SetNetworkPlayerState(0);
-
-                const answerButton = document.querySelector('button[name="answerQuestion"]');
-                if (answerButton) {
-                    answerButton.disabled = false;
-                }
-            }
-        },
-        error: function(xhr) {
-            console.log('Cannot check simulation id = ' + simulation_id);
-            SetNetworkPlayerState(-1);
-        },
-        contentType: "application/json",
-        dataType: 'json'
-    });
-}
+        // Update graph
+        DrawGraph();
 
-// Update edge configuration
-const UpdateEdgeConfiguration = (data) => {
-    SetNetworkPlayerState(-1);
+        // Ok, let's try to update host config form
+        let n = nodes.find((n) => n.data.id === server_id);
 
-    return $.ajax({
-        type: 'POST',
-        url: '/edge/save_config',
-        data: data,
-        complete: function() {
-            DrawGraph();
-            $('#config_edge_main_form_submit_button').html('Сохранить');
-        },
-        error: function(xhr) {
-            console.log('Не удалось обновить конфигурацию ребра');
-            console.log(xhr);
-        },
-        dataType: 'json'
-    });
+        if (!n) {
+          ClearConfigForm("Нет такого хоста");
+          return;
+        }
+
+        if (n.config.type === "server") {
+          ShowServerConfig(n);
+        } else {
+          ClearConfigForm("Узел есть, но это не сервер");
+        }
+      }
+    },
+    error: function (xhr) {
+      console.log("Не удалось удалить команду");
+      console.log(xhr);
+    },
+    dataType: "json",
+  });
 };
 
+// Update router configuration
+const UpdateRouterConfiguration = function (data, router_id) {
+  // Reset network player
+  SetNetworkPlayerState(-1);
+
+  $.ajax({
+    type: "POST",
+    url: "/host/router_save_config",
+    data: data,
+    success: function (data, textStatus, xhr) {
+      if (xhr.status === 200) {
+        // Update nodes
+        if (data.nodes) {
+          nodes = data.nodes;
+        }
 
-const InsertWaitingTime = function ()
-{
-    // Get last emulation task time
-    // and send request to get count of emulating networks before this time
-    $.ajax({
-        type: 'GET',
-        url: 'emulation_queue/time',
-        data: '',
-        success: function(data) {
-            // Run helper function with time param
-            InsertWaitingTimeHelper(data.time)
-        },
-        error: function(err) {
-            console.error("Failed to fetch queue time:", err);
-        },
-        contentType: "application/json",
-        dataType: 'json'
-    });
-}
-
-const InsertWaitingTimeHelper = function(time_filter) {
-    // Insert field with queue size
-    $.ajax({
-        type: 'GET',
-        url: 'emulation_queue/size?time-filter=' + time_filter.toString(),
-        data: '',
-        success: function(data) {
-            const queue_size = parseInt(data.size);
-
-            if ($('#NetworkPlayerLabel').text().startsWith("Шаг:")) {
-                return;
-            } else if (queue_size <= 1) {
-                $('#NetworkPlayerLabel').text("Ожидание 10-15 сек.");
-            } else {
-                $('#NetworkPlayerLabel').text(`Место в очереди ${queue_size}`);
-
-                // Update waiting time
-                setTimeout(() => InsertWaitingTimeHelper(time_filter), 500);
-            }
+        // Update jobs
+        if (data.jobs) {
+          jobs = data.jobs;
+        }
 
-        },
-        error: function(err) {
-            console.error("Failed to fetch queue size:", err);
-        },
-        contentType: "application/json",
-        dataType: 'json'
-    });
-}
+        // Update graph
+        DrawGraph();
 
-// Update host configuration
-const UpdateHostConfiguration = function (data, host_id)
-{
-    // Reset network player
-    SetNetworkPlayerState(-1);
+        // Ok, let's try to update router config form
+        let n = nodes.find((n) => n.data.id === router_id);
 
-    $.ajax({
-        type: 'POST',
-        url: '/host/save_config',
-        data: data,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
-                if (!data.warning){
-
-                    // Update nodes
-                    nodes = data.nodes;
-
-                    // Update jobs
-                    jobs = data.jobs;
-
-                    // Update graph
-                    DrawGraph();
-                }
-
-                // Ok, let's try to update host config form
-                let n = nodes.find(n => n.data.id === host_id);
-
-                if (!n) {
-                    ClearConfigForm('Нет такого хоста');
-                    return;
-                }
-
-                if (n.config.type === 'host'){
-                    ShowHostConfig(n);
-                } else {
-                    ClearConfigForm('Узел есть, но это не хост');
-                    return;
-                }
-
-                if (data.warning){
-                    HostWarningMsg(data.warning);
-                }
-            }
-        },
-        error: function(xhr) {
-            console.log('Не удалось обновить конфигурацию хоста');
-            console.log(xhr);
-        },
-        dataType: 'json'
-    });
-}
+        if (!n) {
+          ClearConfigForm("Нет такого раутера");
+          return;
+        }
 
-// Delete job from host
-const DeleteJobFromHost = function (host_id, job_id, network_guid)
-{
-    // Reset network player
-    SetNetworkPlayerState(-1);
+        if (n.config.type === "router") {
+          ShowRouterConfig(n);
+        } else {
+          ClearConfigForm("Узел есть, но это не раутер");
+          return;
+        }
 
-    let data = {
-      id: job_id,
-      guid: network_guid,
-    };
-
-    $.ajax({
-        type: 'POST',
-        url: '/host/delete_job',
-        data: data,
-        encode: true,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
-                // Update jobs
-                jobs = data.jobs;
-
-                // Update graph
-                DrawGraph();
-
-                // Ok, let's try to update host config form
-                let n = nodes.find(n => n.data.id === host_id);
-
-                if (!n) {
-                    ClearConfigForm('Нет такого хоста');
-                    return;
-                }
-
-                if (n.config.type === 'host'){
-                    ShowHostConfig(n);
-                } else {
-                    ClearConfigForm('Узел есть, но это не хост');
-                }
-
-            }
-        },
-        error: function(xhr) {
-            console.log('Не удалось удалить команду');
-            console.log(xhr);
-        },
-        dataType: 'json'
-    });
-}
+        if (data.warning) {
+          HostWarningMsg(data.warning);
+        }
+      }
+    },
+    error: function (xhr) {
+      console.log("Не удалось обновить конфигурацию хоста");
+      console.log(xhr);
+    },
+    dataType: "json",
+  });
+};
 
-// Delete job from router
-const DeleteJobFromRouter = function (router_id, job_id, network_guid)
-{
-    // Reset network player
-    SetNetworkPlayerState(-1);
+// Update server configuration
+const UpdateServerConfiguration = function (data, router_id) {
+  // Reset network player
+  SetNetworkPlayerState(-1);
+
+  $.ajax({
+    type: "POST",
+    url: "/host/server_save_config",
+    data: data,
+    success: function (data, textStatus, xhr) {
+      if (xhr.status === 200) {
+        if (!data.warning) {
+          if (data.nodes) {
+            nodes = data.nodes;
+          }
+
+          if (data.jobs) {
+            jobs = data.jobs;
+          }
+
+          // Update graph
+          DrawGraph();
+        }
 
-    let data = {
-      id: job_id,
-      guid: network_guid,
-    };
-
-    $.ajax({
-        type: 'POST',
-        url: '/host/delete_job',
-        data: data,
-        encode: true,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
-                // Update jobs
-                jobs = data.jobs;
-
-                // Update graph
-                DrawGraph();
-
-                // Ok, let's try to update host config form
-                let n = nodes.find(n => n.data.id === router_id);
-
-                if (!n) {
-                    ClearConfigForm('Нет такого хоста');
-                    return;
-                }
-
-                if (n.config.type === 'router'){
-                    ShowRouterConfig(n);
-                } else {
-                    ClearConfigForm('Узел есть, но это не раутер');
-                }
-            }
-        },
-        error: function(xhr) {
-            console.log('Не удалось удалить команду');
-            console.log(xhr);
-        },
-        dataType: 'json'
-    });
-}
+        // Ok, let's try to update router config form
+        let n = nodes.find((n) => n.data.id === router_id);
 
-// Delete job from server
-const DeleteJobFromServer = function (server_id, job_id, network_guid)
-{
-    // Reset network player
-    SetNetworkPlayerState(-1);
+        if (!n) {
+          ClearConfigForm("Нет такого сервера");
+          return;
+        }
 
-    let data = {
-      id: job_id,
-      guid: network_guid,
-    };
-
-    $.ajax({
-        type: 'POST',
-        url: '/host/delete_job',
-        data: data,
-        encode: true,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
-                // Update jobs
-                jobs = data.jobs;
-
-                // Update graph
-                DrawGraph();
-
-                // Ok, let's try to update host config form
-                let n = nodes.find(n => n.data.id === server_id);
-
-                if (!n) {
-                    ClearConfigForm('Нет такого хоста');
-                    return;
-                }
-
-                if (n.config.type === 'server'){
-                    ShowServerConfig(n);
-                } else {
-                    ClearConfigForm('Узел есть, но это не сервер');
-                }
-            }
-        },
-        error: function(xhr) {
-            console.log('Не удалось удалить команду');
-            console.log(xhr);
-        },
-        dataType: 'json'
-    });
-}
+        if (n.config.type === "server") {
+          ShowServerConfig(n);
+        } else {
+          ClearConfigForm("Узел есть, но это не сервер");
+          return;
+        }
 
-// Update router configuration
-const UpdateRouterConfiguration = function (data, router_id)
-{
-    // Reset network player
-    SetNetworkPlayerState(-1);
+        if (data.warning) {
+          ServerWarningMsg(data.warning);
+        }
+      }
+    },
+    error: function (xhr) {
+      console.log("Не удалось обновить конфигурацию сервера");
+      console.log(xhr);
+    },
+    dataType: "json",
+  });
+};
 
-    $.ajax({
-        type: 'POST',
-        url: '/host/router_save_config',
-        data: data,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
-                // Update nodes
-                if (data.nodes)
-                {
-                    nodes = data.nodes;
-                }
-
-                // Update jobs
-                if (data.jobs)
-                {
-                    jobs = data.jobs;
-                }
-
-                // Update graph
-                DrawGraph();
-
-                // Ok, let's try to update router config form
-                let n = nodes.find(n => n.data.id === router_id);
-
-                if (!n) {
-                    ClearConfigForm('Нет такого раутера');
-                    return;
-                }
-
-                if (n.config.type === 'router'){
-                    ShowRouterConfig(n);
-                } else {
-                    ClearConfigForm('Узел есть, но это не раутер');
-                    return;
-                }
-
-                if (data.warning)
-                {
-                    HostWarningMsg(data.warning);
-                }
-            }
+// Update hub configuration
+const UpdateHubConfiguration = function (data, hub_id) {
+  $.ajax({
+    type: "POST",
+    url: "/host/hub_save_config",
+    data: data,
+    success: function (data, textStatus, xhr) {
+      if (xhr.status === 200) {
+        // Update nodes
+        nodes = data.nodes;
 
-        },
-        error: function(xhr) {
-            console.log('Не удалось обновить конфигурацию хоста');
-            console.log(xhr);
-        },
-        dataType: 'json'
-    });
-}
+        // We don't clear packets and RunButtonState.
+        // Hub can change only names
 
-// Update server configuration
-const UpdateServerConfiguration = function (data, router_id)
-{
-    // Reset network player
-    SetNetworkPlayerState(-1);
+        // Update graph
+        DrawGraph();
 
-    $.ajax({
-        type: 'POST',
-        url: '/host/server_save_config',
-        data: data,
-        success: function(data, textStatus, xhr) {
+        // Ok, let's try to update host config form
+        let n = nodes.find((n) => n.data.id === hub_id);
 
-            if (xhr.status === 200)
-            {
+        if (!n) {
+          ClearConfigForm("Нет такого узла");
+          return;
+        }
 
-                if (!data.warning){
+        if (n.config.type === "l1_hub") {
+          ShowHubConfig(n);
+        } else {
+          ClearConfigForm("Нет такого хаба");
+        }
+      }
+    },
+    error: function (xhr) {
+      console.log("Cannot update host config");
+      console.log(xhr);
+    },
+    dataType: "json",
+  });
+};
 
-                    if (data.nodes){
-                        nodes = data.nodes;
-                    }
+// Update Switch configuration
+const UpdateSwitchConfiguration = function (data, switch_id) {
+  // Reset network player
+  SetNetworkPlayerState(-1);
 
-                    if (data.jobs){
-                        jobs = data.jobs;
-                    }
+  $.ajax({
+    type: "POST",
+    url: "/host/switch_save_config",
+    data: data,
+    success: function (data, textStatus, xhr) {
+      if (xhr.status === 200) {
+        // Update nodes
+        nodes = data.nodes;
 
-                    // Update graph
-                    DrawGraph();
-                }
+        // We don't clear packets and RunButtonState.
+        // Hub can change only names
 
-                // Ok, let's try to update router config form
-                let n = nodes.find(n => n.data.id === router_id);
+        // Update graph
+        DrawGraph();
 
-                if (!n) {
-                    ClearConfigForm('Нет такого сервера');
-                    return;
-                }
+        // Ok, let's try to update host config form
+        let n = nodes.find((n) => n.data.id === switch_id);
 
-                if (n.config.type === 'server'){
-                    ShowServerConfig(n);
-                } else {
-                    ClearConfigForm('Узел есть, но это не сервер');
-                    return;
-                }
+        if (!n) {
+          ClearConfigForm("Нет такого узла");
+          return;
+        }
 
-                if (data.warning)
-                {
-                    ServerWarningMsg(data.warning);
-                }
-            }
+        if (n.config.type === "l2_switch") {
+          ShowSwitchConfig(n);
+        } else {
+          ClearConfigForm("Нет такого свитча");
+        }
+      }
+    },
+    error: function (xhr) {
+      console.log("Cannot update host config");
+      console.log(xhr);
+    },
+    dataType: "json",
+  });
+};
 
-        },
-        error: function(xhr) {
-            console.log('Не удалось обновить конфигурацию сервера');
-            console.log(xhr);
-        },
-        dataType: 'json'
-    });
-}
+const RunSimulation = function (network_guid) {
+  $.ajax({
+    type: "POST",
+    url: "/run_simulation?guid=" + network_guid,
+    data: "",
+    success: function (data, textStatus, xhr) {
+      if (xhr.status === 201) {
+        console.log("Simulation is running!");
+        // Ok, run CheckSimulation
+        if (data.simulation_id) {
+          CheckSimulation(data.simulation_id);
+        }
+      }
+    },
+    error: function (err) {
+      console.log("Cannot run simulation guid = " + network_guid);
+      SetNetworkPlayerState(-1);
+    },
+    contentType: "application/json",
+    dataType: "json",
+  });
+};
 
-// Update hub configuration
-const UpdateHubConfiguration = function (data, hub_id)
-{
-    $.ajax({
-        type: 'POST',
-        url: '/host/hub_save_config',
-        data: data,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
-                // Update nodes
-                nodes = data.nodes;
-
-                // We don't clear packets and RunButtonState.
-                // Hub can change only names
-
-                // Update graph
-                DrawGraph();
-
-                // Ok, let's try to update host config form
-                let n = nodes.find(n => n.data.id === hub_id);
-
-                if (!n) {
-                    ClearConfigForm('Нет такого узла');
-                    return;
-                }
-
-                if (n.config.type === 'l1_hub'){
-                    ShowHubConfig(n);
-                } else {
-                    ClearConfigForm('Нет такого хаба');
-                }
-            }
-        },
-        error: function(xhr) {
-            console.log('Cannot update host config');
-            console.log(xhr);
-        },
-        dataType: 'json'
-    });
-}
+const FilterPackets = function () {
+  if (filterState.hideARP)
+    packets = packets
+      .map((step) => step.filter((pkt) => !pkt.data.label.startsWith("ARP")))
+      .filter((step) => step.length > 0);
+
+  if (filterState.hideSTP)
+    packets = packets
+      .map((step) =>
+        step.filter(
+          (pkt) =>
+            !(
+              pkt.data.label.startsWith("STP") ||
+              pkt.data.label.startsWith("RSTP")
+            )
+        )
+      )
+      .filter((step) => step.length > 0);
+  console.log("filterState:", filterState);
+  console.log("Packets after filters:", packets);
+};
 
-// Update Switch configuration
-const UpdateSwitchConfiguration = function (data, switch_id)
-{
-    // Reset network player
-    SetNetworkPlayerState(-1);
+const RecoverFilterStates = function () {
+  $("#ARPFilterCheckbox").prop("checked", filterState.hideARP);
+  $("#STPFilterCheckbox").prop("checked", filterState.hideSTP);
+};
 
-    $.ajax({
-        type: 'POST',
-        url: '/host/switch_save_config',
-        data: data,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
-                // Update nodes
-                nodes = data.nodes;
-
-                // We don't clear packets and RunButtonState.
-                // Hub can change only names
-
-                // Update graph
-                DrawGraph();
-
-                // Ok, let's try to update host config form
-                let n = nodes.find(n => n.data.id === switch_id);
-
-                if (!n) {
-                    ClearConfigForm('Нет такого узла');
-                    return;
-                }
-
-                if (n.config.type === 'l2_switch'){
-                    ShowSwitchConfig(n);
-                } else {
-                    ClearConfigForm('Нет такого свитча');
-                }
-            }
+const SetPacketFilter = function () {
+  console.log("Packet filter call");
+  // SetPacketFilter first call on emulated network
+  if (packets && !packets_not_filtered) {
+    packets_not_filtered = JSON.parse(JSON.stringify(packets)); // Array deep copy
+  }
+  // Numerous filter call, we grab our packets copy to filter it
+  else if (packets_not_filtered) {
+    packets = JSON.parse(JSON.stringify(packets_not_filtered));
+  }
+
+  filterState.hideARP = $("#ARPFilterCheckbox").is(":checked");
+  filterState.hideSTP = $("#STPFilterCheckbox").is(":checked");
+
+  console.log("filterState after filter call:", filterState);
+  if (packets) {
+    console.log("packets here");
+    FilterPackets();
+
+    SetNetworkPlayerState(0);
+  }
+};
+
+// 2 states:
+// Do we need emulation
+// We have a packets and ready to play packets
+const SetNetworkPlayerState = function (simultaion_id) {
+  // Reset?
+  if (simultaion_id === -1) {
+    packets = null;
+    packets_not_filtered = null;
+    pcaps = [];
+    SetNetworkPlayerState(0);
+    return;
+  }
+
+  // If we have packets, then we're ready to run
+  if (packets) {
+    $("#NetworkPlayer").empty();
+    $("#NetworkPlayer").append(
+      '<button type="button" class="btn btn-danger me-2" id="NetworkStopButton"><i class="bx bx-stop fs-xl"></i></button>'
+    );
+    $("#NetworkPlayer").append(
+      '<button type="button" class="btn btn-success" id="NetworkPlayPauseButton" onclick="if (typeof window.ym != \'undefined\'){ym(92293993,\'reachGoal\',\'PlayPauseButton\');}"><i class="bx bx-play fs-xl"></i></button>'
+    );
+
+    // Init player
+    PacketPlayer.getInstance().InitPlayer(packets);
+
+    // Configure the slider
+    $("#PacketSliderInput")[0].noUiSlider.updateOptions({
+      start: [1],
+      range: {
+        min: 1,
+        max: packets.length,
+      },
+      format: {
+        to: function (val) {
+          return "" + val;
         },
-        error: function(xhr) {
-            console.log('Cannot update host config');
-            console.log(xhr);
+        from: function (val) {
+          return "" + val;
         },
-        dataType: 'json'
+      },
+      tooltips: false,
     });
-}
-
-const RunSimulation = function (network_guid)
-{
-    $.ajax({
-        type: 'POST',
-        url: '/run_simulation?guid=' + network_guid,
-        data: '',
-        success: function(data, textStatus, xhr) {
-            if (xhr.status === 201)
-            {
-                console.log("Simulation is running!");
-                // Ok, run CheckSimulation
-                if (data.simulation_id)
-                {
-                    CheckSimulation(data.simulation_id);
-                }
-            }
-        },
-        error: function(err) {
-            console.log('Cannot run simulation guid = ' + network_guid);
-            SetNetworkPlayerState(-1);
-        },
-        contentType: "application/json",
-        dataType: 'json'
+
+    // Show Slider on
+    $("#PacketSliderInput").show();
+
+    const pkt_count = packets.reduce(
+      (currentCount, row) => currentCount + row.length,
+      0
+    );
+    $("#NetworkPlayerLabel").text(
+      packets.length +
+        " " +
+        NumWord(packets.length, ["шаг", "шага", "шагов"]) +
+        " / " +
+        pkt_count +
+        " " +
+        NumWord(pkt_count, ["пакет", "пакета", "пакетов"])
+    );
+
+    $("#PacketSliderInput")[0].noUiSlider.on("slide", function (e) {
+      if (!e) return;
+      let x = Math.round(e[0]);
+      PacketPlayer.getInstance().setAnimationTrafficStep(x - 1);
     });
-}
 
-// 2 states:
-// Do we need emulation
-// We have a packets and ready to play packets
-const SetNetworkPlayerState = function(simultaion_id)
-{
-
-    // Reset?
-    if (simultaion_id === -1){
-        packets = null;
-        pcaps = [];
-        SetNetworkPlayerState(0);
+    $("#PacketSliderInput")[0].noUiSlider.on("update", function (e) {
+      if (!e) return;
+      let x = Math.round(e[0]);
+      if (packets.length === 0) {
+        $("#NetworkPlayerLabel").text("0 пакетов");
         return;
-    }
-
-    // If we have packets, then we're ready to run
-    if (packets)
-    {
-        $('#NetworkPlayer').empty();
-        $('#NetworkPlayer').append('<button type="button" class="btn btn-danger me-2" id="NetworkStopButton"><i class="bx bx-stop fs-xl"></i></button>');
-        $('#NetworkPlayer').append('<button type="button" class="btn btn-success" id="NetworkPlayPauseButton" onclick="if (typeof window.ym != \'undefined\'){ym(92293993,\'reachGoal\',\'PlayPauseButton\');}"><i class="bx bx-play fs-xl"></i></button>');
-
-        // Init player
-        PacketPlayer.getInstance().InitPlayer(packets);
-
-        // Configure the slider
-        $('#PacketSliderInput')[0].noUiSlider.updateOptions({
-            start: [1],
-            range: {
-                'min': 1,
-                'max': packets.length,
-            },
-            format: {
-                to: function (val){return '' + val},
-                from: function (val){return '' + val},
-            },
-            tooltips: false,
-        });
+      }
+      $("#NetworkPlayerLabel").text(
+        "Шаг: " +
+          x +
+          "/" +
+          packets.length +
+          " (" +
+          packets[x - 1].length +
+          " " +
+          NumWord(packets[x - 1].length, ["пакет", "пакета", "пакетов"]) +
+          ")"
+      );
+    });
 
-        // Show Slider on
-        $('#PacketSliderInput').show();
+    // Set click handlers
+    $("#NetworkPlayPauseButton").click(function () {
+      // If btn-success then start to play
+      if ($(this).hasClass("btn-success")) {
+        $(this).removeClass("btn-success");
+        $(this).addClass("btn-warning");
 
-        const pkt_count = packets.reduce((currentCount, row) => currentCount + row.length, 0);
-        $('#NetworkPlayerLabel').text(packets.length + ' ' + NumWord(packets.length, ['шаг', 'шага', 'шагов']) + ' / ' + pkt_count + ' ' + NumWord(pkt_count, ['пакет', 'пакета', 'пакетов']));
+        $(this).empty();
+        $(this).append('<i class="bx bx-pause fs-xl"></i>');
 
-        $('#PacketSliderInput')[0].noUiSlider.on('slide', function (e) {
-            if (!e) return;
-            let x =  Math.round(e[0]);
-            PacketPlayer.getInstance().setAnimationTrafficStep(x-1);
-        });
+        // If not in pause. Draw a new layout and go.
+        if (!PacketPlayer.getInstance().getPlayerPause()) {
+          DrawGraphStatic(nodes, edges);
+        }
 
-        $('#PacketSliderInput')[0].noUiSlider.on('update', function (e) {
-            if (!e) return;
-            let x =  Math.round(e[0]);
-            if (packets.length === 0){
-                $('#NetworkPlayerLabel').text('0 пакетов');
-                return;
-            }
-            $('#NetworkPlayerLabel').text('Шаг: ' + x + '/' + packets.length + ' (' +  packets[x-1].length + ' ' + NumWord(packets[x-1].length, ['пакет', 'пакета', 'пакетов']) + ')');
+        PacketPlayer.getInstance().setAnimationTrafficStepCallback(function () {
+          $("#PacketSliderInput")[0].noUiSlider.set(
+            PacketPlayer.getInstance().getAnimationTrafficStep()
+          );
         });
 
-        // Set click handlers
-        $('#NetworkPlayPauseButton').click(function() {
-
-            // If btn-success then start to play
-            if ($(this).hasClass("btn-success")){
-                $(this).removeClass('btn-success');
-                $(this).addClass('btn-warning');
-
-                $(this).empty();
-                $(this).append('<i class="bx bx-pause fs-xl"></i>');
-
-                // If not in pause. Draw a new layout and go.
-                if (!PacketPlayer.getInstance().getPlayerPause())
-                {
-                    DrawGraphStatic(nodes, edges);
-                }
-
-                PacketPlayer.getInstance().setAnimationTrafficStepCallback(function() {
-                    $('#PacketSliderInput')[0].noUiSlider.set(PacketPlayer.getInstance().getAnimationTrafficStep());
-                });
-
-                PacketPlayer.getInstance().StartPlayer(global_cy);
-                return;
-            } else {
-
-                $(this).removeClass('btn-warning');
-                $(this).addClass('btn-success');
-                $(this).empty();
-                $(this).append('<i class="bx bx-play fs-xl"></i>');
-
-                PacketPlayer.getInstance().PausePlayer();
-                return;
-            }
-        });
+        PacketPlayer.getInstance().StartPlayer(global_cy);
+        return;
+      } else {
+        $(this).removeClass("btn-warning");
+        $(this).addClass("btn-success");
+        $(this).empty();
+        $(this).append('<i class="bx bx-play fs-xl"></i>');
 
-        $('#NetworkStopButton').click(function() {
+        PacketPlayer.getInstance().PausePlayer();
+        return;
+      }
+    });
 
-            PacketPlayer.getInstance().resetAnimationTrafficStepCallback();
-            PacketPlayer.getInstance().StopPlayer();
+    $("#NetworkStopButton").click(function () {
+      PacketPlayer.getInstance().resetAnimationTrafficStepCallback();
+      PacketPlayer.getInstance().StopPlayer();
 
-            // Reset slider.
-            $('#PacketSliderInput')[0].noUiSlider.set(0);
+      // Reset slider.
+      $("#PacketSliderInput")[0].noUiSlider.set(0);
 
-            DrawGraph(nodes, edges);
+      DrawGraph(nodes, edges);
 
-            $('#NetworkPlayPauseButton').removeClass('btn-success');
-            $('#NetworkPlayPauseButton').removeClass('btn-warning');
-            $('#NetworkPlayPauseButton').empty();
-            $('#NetworkPlayPauseButton').addClass('btn-success');
-            $('#NetworkPlayPauseButton').append('<i class="bx bx-play fs-xl"></i>');
-            return;
-        });
+      $("#NetworkPlayPauseButton").removeClass("btn-success");
+      $("#NetworkPlayPauseButton").removeClass("btn-warning");
+      $("#NetworkPlayPauseButton").empty();
+      $("#NetworkPlayPauseButton").addClass("btn-success");
+      $("#NetworkPlayPauseButton").append('<i class="bx bx-play fs-xl"></i>');
+      return;
+    });
 
-        return;
+    return;
+  }
+
+  // No packets.
+  // The network is simulating?
+  if (simultaion_id) {
+    $("#NetworkPlayer").empty();
+    $("#PacketSliderInput").hide();
+    $("#NetworkPlayer").append(
+      '<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Эмулируется...</button>'
+    );
+    InsertWaitingTime();
+    CheckSimulation(simultaion_id);
+    return;
+  }
+
+  // No packets and no simulation.
+  // Add emulation button.
+  $("#NetworkPlayer").empty();
+  $("#PacketSliderInput").hide();
+  $("#NetworkPlayer").append(
+    '<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton">Эмулировать</button>'
+  );
+  $("#NetworkPlayerLabel").empty();
+
+  $("#NetworkEmulateButton").click(function () {
+    // Check for job. If no job - show modal and exit.
+    if (!jobs.length) {
+      $("#noJobsModal").modal("toggle");
+      return;
     }
 
-    // No packets.
-    // The network is simulating?
-    if (simultaion_id)
-    {
-        $('#NetworkPlayer').empty();
-        $('#PacketSliderInput').hide();
-        $('#NetworkPlayer').append('<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Эмулируется...</button>');
-        InsertWaitingTime()
-        CheckSimulation(simultaion_id);
-        return;
+    if (nodes.length > 80) {
+      $("#tooManyHostModal").modal("toggle");
+      return;
     }
 
-    // No packets and no simulation.
-    // Add emulation button.
-    $('#NetworkPlayer').empty();
-    $('#PacketSliderInput').hide();
-    $('#NetworkPlayer').append('<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton">Эмулировать</button>');
-    $('#NetworkPlayerLabel').empty();
-
-    $('#NetworkEmulateButton').click(function() {
-
-        // Check for job. If no job - show modal and exit.
-        if (!jobs.length)
-        {
-            $('#noJobsModal').modal('toggle');
-            return;
-        }
-
-        if (nodes.length > 80)
-        {
-            $('#tooManyHostModal').modal('toggle');
-            return;
-        }
-
-        if (typeof window.ym != 'undefined')
-        {
-            ym(92293993,'reachGoal','NetworkEmulate');
-        }
-
-        RunSimulation(network_guid);
+    if (typeof window.ym != "undefined") {
+      ym(92293993, "reachGoal", "NetworkEmulate");
+    }
 
-        $('#NetworkPlayer').empty();
-        $('#NetworkPlayer').append('<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Эмулируется...</button>');
-        InsertWaitingTime();
-        return;
-    });
+    RunSimulation(network_guid);
 
+    $("#NetworkPlayer").empty();
+    $("#NetworkPlayer").append(
+      '<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Эмулируется...</button>'
+    );
+    InsertWaitingTime();
     return;
+  });
 
-}
+  return;
+};
 
 // 2 states:
 // No packets - disable button.
 // We have a packets and ready to play packets
-const SetSharedNetworkPlayerState = function()
-{
-
-    // If we have packets, then we're ready to run
-    if (packets)
-    {
-        $('#NetworkPlayer').empty();
-        $('#NetworkPlayer').append('<button type="button" class="btn btn-danger me-2" id="NetworkStopButton"><i class="bx bx-stop fs-xl"></i></button>');
-        $('#NetworkPlayer').append('<button type="button" class="btn btn-success" id="NetworkPlayPauseButton" onclick="if (typeof window.ym != \'undefined\'){ym(92293993,\'reachGoal\',\'PlayPauseButton\');}"><i class="bx bx-play fs-xl"></i></button>');
-
-        // Init player
-        PacketPlayer.getInstance().InitPlayer(packets);
-
-        // Configure the slider
-        $('#PacketSliderInput')[0].noUiSlider.updateOptions({
-            start: [1],
-            range: {
-                'min': 1,
-                'max': packets.length,
-            },
-            format: {
-                to: function (val){return '' + val},
-                from: function (val){return '' + val},
-            },
-            tooltips: false,
-        });
+const SetSharedNetworkPlayerState = function () {
+  // If we have packets, then we're ready to run
+  if (packets) {
+    $("#NetworkPlayer").empty();
+    $("#NetworkPlayer").append(
+      '<button type="button" class="btn btn-danger me-2" id="NetworkStopButton"><i class="bx bx-stop fs-xl"></i></button>'
+    );
+    $("#NetworkPlayer").append(
+      '<button type="button" class="btn btn-success" id="NetworkPlayPauseButton" onclick="if (typeof window.ym != \'undefined\'){ym(92293993,\'reachGoal\',\'PlayPauseButton\');}"><i class="bx bx-play fs-xl"></i></button>'
+    );
+
+    // Init player
+    PacketPlayer.getInstance().InitPlayer(packets);
+
+    // Configure the slider
+    $("#PacketSliderInput")[0].noUiSlider.updateOptions({
+      start: [1],
+      range: {
+        min: 1,
+        max: packets.length,
+      },
+      format: {
+        to: function (val) {
+          return "" + val;
+        },
+        from: function (val) {
+          return "" + val;
+        },
+      },
+      tooltips: false,
+    });
 
-        // Show Slider on
-        $('#PacketSliderInput').show();
+    // Show Slider on
+    $("#PacketSliderInput").show();
+
+    const pkt_count = packets.reduce(
+      (currentCount, row) => currentCount + row.length,
+      0
+    );
+    $("#NetworkPlayerLabel").text(
+      packets.length +
+        " " +
+        NumWord(packets.length, ["шаг", "шага", "шагов"]) +
+        " / " +
+        pkt_count +
+        " " +
+        NumWord(pkt_count, ["пакет", "пакета", "пакетов"])
+    );
+
+    $("#PacketSliderInput")[0].noUiSlider.on("slide", function (e) {
+      if (!e) return;
+      let x = Math.round(e[0]);
+      PacketPlayer.getInstance().setAnimationTrafficStep(x - 1);
+    });
 
-        const pkt_count = packets.reduce((currentCount, row) => currentCount + row.length, 0);
-        $('#NetworkPlayerLabel').text(packets.length + ' ' + NumWord(packets.length, ['шаг', 'шага', 'шагов']) + ' / ' + pkt_count + ' ' + NumWord(pkt_count, ['пакет', 'пакета', 'пакетов']));
+    $("#PacketSliderInput")[0].noUiSlider.on("update", function (e) {
+      if (!e) return;
+      let x = Math.round(e[0]);
+      if (packets.length === 0) {
+        $("#NetworkPlayerLabel").text("0 пакетов");
+        return;
+      }
+      $("#NetworkPlayerLabel").text(
+        "Шаг: " +
+          x +
+          "/" +
+          packets.length +
+          " (" +
+          packets[x - 1].length +
+          " " +
+          NumWord(packets[x - 1].length, ["пакет", "пакета", "пакетов"]) +
+          ")"
+      );
+    });
 
-        $('#PacketSliderInput')[0].noUiSlider.on('slide', function (e) {
-            if (!e) return;
-            let x =  Math.round(e[0]);
-            PacketPlayer.getInstance().setAnimationTrafficStep(x-1);
-        });
+    // Set click handlers
+    $("#NetworkPlayPauseButton").click(function () {
+      // If btn-success then start to play
+      if ($(this).hasClass("btn-success")) {
+        $(this).removeClass("btn-success");
+        $(this).addClass("btn-warning");
 
-        $('#PacketSliderInput')[0].noUiSlider.on('update', function (e) {
-            if (!e) return;
-            let x =  Math.round(e[0]);
-            if (packets.length === 0){
-                $('#NetworkPlayerLabel').text('0 пакетов');
-                return;
-            }
-            $('#NetworkPlayerLabel').text('Шаг: ' + x + '/' + packets.length + ' (' +  packets[x-1].length + ' ' + NumWord(packets[x-1].length, ['пакет', 'пакета', 'пакетов']) + ')');
-        });
+        $(this).empty();
+        $(this).append('<i class="bx bx-pause fs-xl"></i>');
+
+        // If not in pause. Draw a new layout and go.
+        if (!PacketPlayer.getInstance().getPlayerPause()) {
+          DrawGraphStatic(nodes, edges);
+        }
 
-        // Set click handlers
-        $('#NetworkPlayPauseButton').click(function() {
-
-            // If btn-success then start to play
-            if ($(this).hasClass("btn-success")){
-                $(this).removeClass('btn-success');
-                $(this).addClass('btn-warning');
-
-                $(this).empty();
-                $(this).append('<i class="bx bx-pause fs-xl"></i>');
-
-                // If not in pause. Draw a new layout and go.
-                if (!PacketPlayer.getInstance().getPlayerPause())
-                {
-                    DrawGraphStatic(nodes, edges);
-                }
-
-                PacketPlayer.getInstance().setAnimationTrafficStepCallback(function() {
-                    $('#PacketSliderInput')[0].noUiSlider.set(PacketPlayer.getInstance().getAnimationTrafficStep());
-                });
-
-                PacketPlayer.getInstance().StartPlayer(global_cy);
-            } else {
-                $(this).removeClass('btn-warning');
-                $(this).addClass('btn-success');
-                $(this).empty();
-                $(this).append('<i class="bx bx-play fs-xl"></i>');
-
-                PacketPlayer.getInstance().PausePlayer();
-                return;
-            }
+        PacketPlayer.getInstance().setAnimationTrafficStepCallback(function () {
+          $("#PacketSliderInput")[0].noUiSlider.set(
+            PacketPlayer.getInstance().getAnimationTrafficStep()
+          );
         });
 
-        $('#NetworkStopButton').click(function() {
+        PacketPlayer.getInstance().StartPlayer(global_cy);
+      } else {
+        $(this).removeClass("btn-warning");
+        $(this).addClass("btn-success");
+        $(this).empty();
+        $(this).append('<i class="bx bx-play fs-xl"></i>');
 
-            PacketPlayer.getInstance().resetAnimationTrafficStepCallback();
-            PacketPlayer.getInstance().StopPlayer();
+        PacketPlayer.getInstance().PausePlayer();
+        return;
+      }
+    });
 
-            // Reset slider.
-            $('#PacketSliderInput')[0].noUiSlider.set(0);
+    $("#NetworkStopButton").click(function () {
+      PacketPlayer.getInstance().resetAnimationTrafficStepCallback();
+      PacketPlayer.getInstance().StopPlayer();
 
-            DrawSharedGraph(nodes, edges);
+      // Reset slider.
+      $("#PacketSliderInput")[0].noUiSlider.set(0);
 
-            $('#NetworkPlayPauseButton').removeClass('btn-success');
-            $('#NetworkPlayPauseButton').removeClass('btn-warning');
-            $('#NetworkPlayPauseButton').empty();
-            $('#NetworkPlayPauseButton').addClass('btn-success');
-            $('#NetworkPlayPauseButton').append('<i class="bx bx-play fs-xl"></i>');
-            return;
-        });
+      DrawSharedGraph(nodes, edges);
 
-        return;
-    }
+      $("#NetworkPlayPauseButton").removeClass("btn-success");
+      $("#NetworkPlayPauseButton").removeClass("btn-warning");
+      $("#NetworkPlayPauseButton").empty();
+      $("#NetworkPlayPauseButton").addClass("btn-success");
+      $("#NetworkPlayPauseButton").append('<i class="bx bx-play fs-xl"></i>');
+      return;
+    });
 
-    // No packets
-    // Add info button
-    $('#NetworkPlayer').empty();
-    $('#PacketSliderInput').hide();
-    $('#NetworkPlayerLabel').empty();
-    $('#NetworkPlayer').append('<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Нет эмуляции</button>');
     return;
-}
+  }
+
+  // No packets
+  // Add info button
+  $("#NetworkPlayer").empty();
+  $("#PacketSliderInput").hide();
+  $("#NetworkPlayerLabel").empty();
+  $("#NetworkPlayer").append(
+    '<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Нет эмуляции</button>'
+  );
+  return;
+};
 
 // Take a picture and update it.
-const TakeGraphPictureAndUpdate = function()
-{
-    if (!global_cy)
-    {
-        return;
-    }
-
-    let png_blob = global_cy.png({output: 'blob', maxWidth: 512, maxHeight: 512});
-
-    $.ajax({
-        type: 'POST',
-        url: '/network/upload_network_picture?guid=' + network_guid,
-        data: png_blob,
-        processData: false,
-        error: function(xhr) {
-
-            if (xhr.status != 200){
-                console.log('Cannot upload graph picture');
-            }
-
-        },
-        dataType: 'image/png'
-    });
-}
+const TakeGraphPictureAndUpdate = function () {
+  if (!global_cy) {
+    return;
+  }
+
+  let png_blob = global_cy.png({
+    output: "blob",
+    maxWidth: 512,
+    maxHeight: 512,
+  });
+
+  $.ajax({
+    type: "POST",
+    url: "/network/upload_network_picture?guid=" + network_guid,
+    data: png_blob,
+    processData: false,
+    error: function (xhr) {
+      if (xhr.status != 200) {
+        console.log("Cannot upload graph picture");
+      }
+    },
+    dataType: "image/png",
+  });
+};
 
 // Calculate drop offsets
-const CalculateDropOffset = function(elem_x, elem_y)
-{
-    const network_scheme = document.getElementById("network_scheme");
-    let offset_left = 0;
-    let offset_top = 0;
-    let ret = {'x' : 0, 'y' : 0};
-
-    console.log(elem_x + ", " + elem_y);
-
-    if (network_scheme){
-        ret.x += network_scheme.offsetLeft - 25;
-        ret.y += network_scheme.offsetTop - 15;
-    }
+const CalculateDropOffset = function (elem_x, elem_y) {
+  const network_scheme = document.getElementById("network_scheme");
+  let offset_left = 0;
+  let offset_top = 0;
+  let ret = { x: 0, y: 0 };
 
-    if (global_cy)
-    {
-        ret.x = ret.x + global_cy.pan().x;
-        ret.y = ret.y + global_cy.pan().y;
+  console.log(elem_x + ", " + elem_y);
 
-        ret.x = (elem_x - ret.x) / global_cy.zoom();
-        ret.y = (elem_y - ret.y) / global_cy.zoom();
-    }
+  if (network_scheme) {
+    ret.x += network_scheme.offsetLeft - 25;
+    ret.y += network_scheme.offsetTop - 15;
+  }
 
-    return ret;
-}
+  if (global_cy) {
+    ret.x = ret.x + global_cy.pan().x;
+    ret.y = ret.y + global_cy.pan().y;
 
-const UpdateNetworkConfig = function()
-{
-    if (!global_cy){
-        return;
-    }
+    ret.x = (elem_x - ret.x) / global_cy.zoom();
+    ret.y = (elem_y - ret.y) / global_cy.zoom();
+  }
 
-    let data = {'network_title' : network_title, 'network_description' : network_description,
-    'zoom' : global_cy.zoom(),'pan_x' : global_cy.pan().x, 'pan_y' : global_cy.pan().y};
+  return ret;
+};
 
-    $.ajax({
-        type: 'POST',
-        url: '/network/update_network_config?guid=' + network_guid,
-        data: JSON.stringify(data),
-        contentType: "application/json; charset=utf-8",
-        success: function(data, textStatus, xhr) {
-        },
-        error: function(xhr) {
-            console.log('Cannot update network config');
-            console.log(xhr);
-        },
-        dataType: 'json'
-    });
+const UpdateNetworkConfig = function () {
+  if (!global_cy) {
+    return;
+  }
+
+  let data = {
+    network_title: network_title,
+    network_description: network_description,
+    zoom: global_cy.zoom(),
+    pan_x: global_cy.pan().x,
+    pan_y: global_cy.pan().y,
+  };
 
-}
-
-const CopyNetwork = function ()
-{
-    $.ajax({
-        type: 'POST',
-        url: '/network/copy_network?guid=' + network_guid,
-        data: '',
-        success: function(data, textStatus, xhr) {
-            if (xhr.status === 200)
-            {
-                console.log("Copy network is made.");
-                $('#ModalCopy').modal('show');
-                $('.modal-option').click(function() {
-                var selectedOption = $(this).attr('data-option');
-                    if (selectedOption === 'edit') {
-                        var newUrl = data.new_url;
-                        window.location.href = newUrl;
-                        console.log('Go to editing');
-                    } else if (selectedOption === 'continue') {
-                        console.log('Continue here');
-                    }
-                $('#ModalCopy').modal('hide');
-                });
-            }
-        },
-        error: function(err) {
-            console.log('Copy has not been made.');
-        },
-        contentType: "application/json",
-        dataType: 'json'
-    });
-}
+  $.ajax({
+    type: "POST",
+    url: "/network/update_network_config?guid=" + network_guid,
+    data: JSON.stringify(data),
+    contentType: "application/json; charset=utf-8",
+    success: function (data, textStatus, xhr) {},
+    error: function (xhr) {
+      console.log("Cannot update network config");
+      console.log(xhr);
+    },
+    dataType: "json",
+  });
+};
 
+const CopyNetwork = function () {
+  $.ajax({
+    type: "POST",
+    url: "/network/copy_network?guid=" + network_guid,
+    data: "",
+    success: function (data, textStatus, xhr) {
+      if (xhr.status === 200) {
+        console.log("Copy network is made.");
+        $("#ModalCopy").modal("show");
+        $(".modal-option").click(function () {
+          var selectedOption = $(this).attr("data-option");
+          if (selectedOption === "edit") {
+            var newUrl = data.new_url;
+            window.location.href = newUrl;
+            console.log("Go to editing");
+          } else if (selectedOption === "continue") {
+            console.log("Continue here");
+          }
+          $("#ModalCopy").modal("hide");
+        });
+      }
+    },
+    error: function (err) {
+      console.log("Copy has not been made.");
+    },
+    contentType: "application/json",
+    dataType: "json",
+  });
+};
 
-const NumWord = function (value, words){
-    value = Math.abs(value) % 100;
-    var num = value % 10;
-    if(value > 10 && value < 20) return words[2];
-    if(num > 1 && num < 5) return words[1];
-    if(num == 1) return words[0];
-    return words[2];
-}
+const NumWord = function (value, words) {
+  value = Math.abs(value) % 100;
+  var num = value % 10;
+  if (value > 10 && value < 20) return words[2];
+  if (num > 1 && num < 5) return words[1];
+  if (num == 1) return words[0];
+  return words[2];
+};
 
-const SaveNetworkObject = function (){
-    let n = JSON.parse(JSON.stringify(nodes));
-    let e = JSON.parse(JSON.stringify(edges));
+const SaveNetworkObject = function () {
+  let n = JSON.parse(JSON.stringify(nodes));
+  let e = JSON.parse(JSON.stringify(edges));
 
-    NetworkCache.push({
-        nodes: n,
-        edges: e,
-    });
+  NetworkCache.push({
+    nodes: n,
+    edges: e,
+  });
 
-    return 0;
-}
+  return 0;
+};
 
-const RestoreNetworkObject = function (){
-    let x = NetworkCache.pop();
+const RestoreNetworkObject = function () {
+  let x = NetworkCache.pop();
 
-    if (!x){
-        return;
-    }
+  if (!x) {
+    return;
+  }
 
-    nodes=x.nodes;
-    edges=x.edges;
+  nodes = x.nodes;
+  edges = x.edges;
 
-    return 0;
-}
+  return 0;
+};
diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index 7e97ccda..d57daadb 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -133,6 +133,18 @@ <h5 class="modal-title" id="netConfigModalLabel">Настройки сети</h5
                             <label for="network_description" class="text-sm pt-2">Описание сети</label>
                             <textarea rows="3" class="form-control form-control-sm" id="network_description" name="network_description">{{ network.description }}</textarea>
                         </div>
+                        <hr class="my-3">
+                        <div>
+                            <h6>Настройки анимации</h6>
+                            <div>
+                                <input class="form-check-input" role="switch" type="checkbox" id="ARPFilterCheckbox" name="ARPFilterCheckbox">
+                                <label for="ARPFilterCheckbox"> Пропустить ARP пакеты </label>
+                            </div>
+                            <div>
+                                <input class="form-check-input" role="switch" type="checkbox" id="STPFilterCheckbox" name="STPFilterCheckbox">
+                                <label for="STPFilterCheckbox"> Пропустить STP/RSTP пакеты </label>
+                            </div>
+                        </div>
                     </form>
                 </div>
                 <div class="modal-footer">
@@ -279,7 +291,11 @@ <h6 class="mb-2">Наше компьюнити</h6>
 
 <script>
     $(document).ready(function() {
-        $("#networkConfigrationCancel").click(function(){
+        $("#netConfigModal").on("hidden.bs.modal", function() {
+            RecoverFilterStates();
+        })
+
+        $("#networkConfigurationCancel").click(function(){
             $('#netConfigModal').modal('hide');
         });
 
@@ -291,6 +307,7 @@ <h6 class="mb-2">Наше компьюнити</h6>
             network_title = $("#network_title").val();
             network_description = $("#network_description").val();
             UpdateNetworkConfig();
+            SetPacketFilter();
             $('#netConfigModal').modal('hide');
             $('#network_title_head').text(network_title);
         });
@@ -301,6 +318,7 @@ <h6 class="mb-2">Наше компьюнити</h6>
                 network_title = $("#network_title").val();
                 network_description = $("#network_description").val();
                 UpdateNetworkConfig();
+                SetPacketFilter();
                 $('#netConfigModal').modal('hide');
                 $('#network_title_head').text(network_title);
                 return false;
diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
new file mode 100644
index 00000000..c3cc3d16
--- /dev/null
+++ b/front/tests/test_packet_filters.py
@@ -0,0 +1,156 @@
+import pytest
+from selenium.webdriver.common.by import By
+
+from conftest import MiminetTester
+from utils.locators import Location
+from utils.networks import MiminetTestNetwork
+
+
+class TestPacketFilters:
+    @pytest.fixture(scope="class")
+    def network(self, selenium: MiminetTester):
+        test_network = MiminetTestNetwork(selenium)
+        yield test_network
+        test_network.delete()
+
+    def _wait_filter_state_ready(self, selenium: MiminetTester):
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return typeof filterState !== 'undefined' && "
+                "typeof SetPacketFilter === 'function';"
+            )
+        )
+
+    def _open_settings_modal(self, selenium: MiminetTester):
+        selenium.find_element(
+            By.CSS_SELECTOR, Location.Network.TopButton.OPTIONS.selector
+        ).click()
+        selenium.wait_until_appear(By.CSS_SELECTOR, "#netConfigModal")
+
+    def _close_settings_modal(self, selenium: MiminetTester):
+        selenium.execute_script("$('#netConfigModal').modal('hide');")
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return !document.querySelector('#netConfigModal')"
+                " || $('#netConfigModal').is(':hidden');"
+            )
+        )
+
+    def _checkbox_state(self, selenium: MiminetTester, checkbox_id: str):
+        return selenium.execute_script(
+            f"var el = document.getElementById('{checkbox_id}');"
+            "return el ? el.checked : null;"
+        )
+
+    def _prepare_packets(self, selenium: MiminetTester, labels: list[str]):
+        selenium.execute_script(
+            """
+            filterState.hideARP = false;
+            filterState.hideSTP = false;
+            packets_not_filtered = null;
+            packets = arguments[0].map(function(label){ return [{ data: { label: label } }]; });
+            pcaps = [];
+            """,
+            labels,
+        )
+
+    def test_enable_arp_filter_filters_packets(
+        self, selenium: MiminetTester, network: MiminetTestNetwork
+    ):
+        selenium.get(network.url)
+        self._wait_filter_state_ready(selenium)
+
+        self._prepare_packets(
+            selenium, ["ARP Request: who-has 10.0.0.1", "ICMP Echo Reply"]
+        )
+
+        self._open_settings_modal(selenium)
+        arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
+        if not arp_checkbox.is_selected():
+            arp_checkbox.click()
+        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
+        self._close_settings_modal(selenium)
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return filterState.hideARP === true"
+                " && Array.isArray(packets)"
+                " && packets.length === 1"
+                " && packets[0].length === 1"
+                " && !packets[0][0].data.label.startsWith('ARP');"
+            )
+        )
+
+        filtered_packets = selenium.execute_script("return packets;")
+        assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
+
+        self._open_settings_modal(selenium)
+        assert (
+            self._checkbox_state(selenium, "ARPFilterCheckbox") is True
+        ), "ARP checkbox should remain selected after saving"
+        self._close_settings_modal(selenium)
+
+    def test_cancel_does_not_change_filter_state(
+        self, selenium: MiminetTester, network: MiminetTestNetwork
+    ):
+        selenium.get(network.url)
+        self._wait_filter_state_ready(selenium)
+
+        initial_state = selenium.execute_script("return filterState.hideARP === true;")
+
+        self._open_settings_modal(selenium)
+        arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
+        arp_checkbox.click()  # toggle current state
+        self._close_settings_modal(selenium)
+
+        current_state = selenium.execute_script("return filterState.hideARP === true;")
+        assert (
+            current_state == initial_state
+        ), "Filter state must not change when closing without saving"
+
+        self._open_settings_modal(selenium)
+        assert (
+            self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state
+        ), "ARP checkbox should display the original value after cancel"
+        self._close_settings_modal(selenium)
+
+    def test_enable_stp_filter_filters_packets(
+        self, selenium: MiminetTester, network: MiminetTestNetwork
+    ):
+        selenium.get(network.url)
+        self._wait_filter_state_ready(selenium)
+
+        self._prepare_packets(
+            selenium,
+            [
+                "STP Configuration BPDU",
+                "RSTP Topology Change",
+                "ICMP Echo Reply",
+            ],
+        )
+
+        self._open_settings_modal(selenium)
+        stp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#STPFilterCheckbox")
+        if not stp_checkbox.is_selected():
+            stp_checkbox.click()
+        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
+        self._close_settings_modal(selenium)
+
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return filterState.hideSTP === true"
+                " && Array.isArray(packets)"
+                " && packets.length === 1"
+                " && packets[0].length === 1"
+                " && !packets[0][0].data.label.startsWith('STP')"
+                " && !packets[0][0].data.label.startsWith('RSTP');"
+            )
+        )
+
+        filtered_packets = selenium.execute_script("return packets;")
+        assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
+
+        self._open_settings_modal(selenium)
+        assert (
+            self._checkbox_state(selenium, "STPFilterCheckbox") is True
+        ), "STP checkbox should remain selected after saving"
+        self._close_settings_modal(selenium)

From 3128795ddfcc4ef5943f70bf11b0aa7404b6449a Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Wed, 5 Nov 2025 08:05:34 +0300
Subject: [PATCH 10/33] fix: fixed locators for tests

---
 front/tests/utils/locators.py | 27 ++++++++-------
 front/tests/utils/networks.py | 63 ++++++++++++++++++++++++++++++-----
 2 files changed, 70 insertions(+), 20 deletions(-)

diff --git a/front/tests/utils/locators.py b/front/tests/utils/locators.py
index ab31a174..adb4d96c 100644
--- a/front/tests/utils/locators.py
+++ b/front/tests/utils/locators.py
@@ -265,20 +265,23 @@ class Job:
             # The only stable way for finding ip/subnet mask on page is using XPATHs
 
             @staticmethod
-            def get_ip_field_xpath(id: int = 0):
-                """XPATH for specific ip address from config panel.
-                Args:
-                    id (int): Position of link in links list. Starts from 0."""
-                assert id >= 0, "IP field can't have index less than 0."
-                return f"/html/body/main/section/div[2]/div[2]/div[2]/form/div[{4 + id * 2}]/input[1]"
+            def get_interface_by_index(index: int):
+                assert index >= 0, "Interface index must be non-negative"
+                return Locator(f"#config_host_interface_{index}")
 
             @staticmethod
-            def get_mask_field_xpath(id: int = 0):
-                """XPATH for specific subnet mask from config panel.
-                Args:
-                    id (int): Position of link in links list. Starts from 0."""
-                assert id >= 0, "Subnet mask field can't have index less than 0."
-                return f"/html/body/main/section/div[2]/div[2]/div[2]/form/div[{4 + id * 2}]/input[2]"
+            def get_ip_field_locator(interface_id: str | None = None, index: int | None = None):
+                if interface_id is not None:
+                    return Locator(f"#config_host_ip_{interface_id}")
+                assert index is not None, "Either interface_id or index must be provided"
+                return Locator(f"#config_host_interface_{index} input[id^='config_host_ip_']")
+
+            @staticmethod
+            def get_mask_field_locator(interface_id: str | None = None, index: int | None = None):
+                if interface_id is not None:
+                    return Locator(f"#config_host_mask_{interface_id}")
+                assert index is not None, "Either interface_id or index must be provided"
+                return Locator(f"#config_host_interface_{index} input[id^='config_host_mask_']")
 
             MODAL_ERROR_DIALOG = Locator("#config_content > div")
 
diff --git a/front/tests/utils/networks.py b/front/tests/utils/networks.py
index 39b94d64..66880428 100644
--- a/front/tests/utils/networks.py
+++ b/front/tests/utils/networks.py
@@ -274,15 +274,62 @@ def fill_link(self, ip: str, mask: int, link_id: int = 0):
             link_id: Link number in the config list (starts from 0)."""
         self.__check_config_open()
 
+        node_type = self.__node.get("config", {}).get("type", "")
+        type_mapping = {
+            "host": "config_host",
+            "router": "config_router",
+            "server": "config_server",
+            "l1_hub": "config_hub",
+            "l2_switch": "config_switch",
+        }
+        prefix = type_mapping.get(node_type)
+
+        if not prefix:
+            raise Exception(f"Unsupported node type '{node_type}' for link filling")
+
         try:
-            self.__selenium.find_element(
-                By.XPATH, Location.Network.ConfigPanel.get_ip_field_xpath(link_id)
-            ).send_keys(ip)
-            self.__selenium.find_element(
-                By.XPATH, Location.Network.ConfigPanel.get_mask_field_xpath(link_id)
-            ).send_keys(str(mask))
-        except Exception:
-            raise Exception("Unable to find link. Maybe you forgot to add edges.")
+            self.__selenium.execute_script(
+                """
+                const ipValue = arguments[0];
+                const maskValue = arguments[1].toString();
+                const elementPrefix = arguments[2];
+                const index = arguments[3];
+
+                const container = document.querySelector('#config_content');
+                if (!container) {
+                    throw new Error('Config content container not found');
+                }
+
+                const ipInputs = container.querySelectorAll(
+                    "input[id^='" + elementPrefix + "_ip_']"
+                );
+                const maskInputs = container.querySelectorAll(
+                    "input[id^='" + elementPrefix + "_mask_']"
+                );
+
+                if (index >= ipInputs.length || index >= maskInputs.length) {
+                    throw new Error('Requested interface index is out of range');
+                }
+
+                ipInputs[index].value = '';
+                ipInputs[index].dispatchEvent(new Event('input', { bubbles: true }));
+                ipInputs[index].value = ipValue;
+                ipInputs[index].dispatchEvent(new Event('input', { bubbles: true }));
+
+                maskInputs[index].value = '';
+                maskInputs[index].dispatchEvent(new Event('input', { bubbles: true }));
+                maskInputs[index].value = maskValue;
+                maskInputs[index].dispatchEvent(new Event('input', { bubbles: true }));
+                """,
+                ip,
+                mask,
+                prefix,
+                link_id,
+            )
+        except Exception as exc:
+            raise Exception(
+                "Unable to locate interface inputs. Ensure the node has enough links configured."
+            ) from exc
 
     def fill_links(self, ip_mask_list: list):
         """Fill multiple links (in config panel) with IP addresses and masks.

From be388d1adec3fcd65f79ad93ac95329a9f4cb455 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Wed, 5 Nov 2025 08:52:18 +0300
Subject: [PATCH 11/33] fix: restored utils from original

---
 front/tests/utils/locators.py | 31 ++++++++++++++-----------------
 front/tests/utils/networks.py | 18 +++++++++---------
 2 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/front/tests/utils/locators.py b/front/tests/utils/locators.py
index adb4d96c..e3e44691 100644
--- a/front/tests/utils/locators.py
+++ b/front/tests/utils/locators.py
@@ -48,7 +48,7 @@ def get_network_button_xpath(id: int):
             Args:
                 id (int): Position of network in networks list. Starts from 0."""
             assert id >= 0, "Network button can't have index less than 0."
-            return f"/html/body/section/div/div/div[{id+2}]"
+            return f"/html/body/section/div/div/div[{id + 2}]"
 
     class Network:
         """Specific network page."""
@@ -143,7 +143,7 @@ def get_table_row_xpath(switch_name: str, id: int):
                         Args:
                             id (int): Position of row in VLAN table. Starts from 0."""
                         assert id >= 0, "Row can't have index less than 0."
-                        return f'//*[@id="config_table_vlan_{switch_name}"]/table/tbody/tr[{id+1}]'
+                        return f'//*[@id="config_table_vlan_{switch_name}"]/table/tbody/tr[{id + 1}]'
 
             class Host(CommonDevice):
                 MAIN_FORM = Locator("#config_main_form")
@@ -265,23 +265,20 @@ class Job:
             # The only stable way for finding ip/subnet mask on page is using XPATHs
 
             @staticmethod
-            def get_interface_by_index(index: int):
-                assert index >= 0, "Interface index must be non-negative"
-                return Locator(f"#config_host_interface_{index}")
+            def get_ip_field_xpath(id: int = 0):
+                """XPATH for specific ip address from config panel.
+                Args:
+                    id (int): Position of link in links list. Starts from 0."""
+                assert id >= 0, "IP field can't have index less than 0."
+                return f"/html/body/main/section/div[2]/div[2]/div[2]/form/div[{4 + id * 2}]/input[1]"
 
             @staticmethod
-            def get_ip_field_locator(interface_id: str | None = None, index: int | None = None):
-                if interface_id is not None:
-                    return Locator(f"#config_host_ip_{interface_id}")
-                assert index is not None, "Either interface_id or index must be provided"
-                return Locator(f"#config_host_interface_{index} input[id^='config_host_ip_']")
-
-            @staticmethod
-            def get_mask_field_locator(interface_id: str | None = None, index: int | None = None):
-                if interface_id is not None:
-                    return Locator(f"#config_host_mask_{interface_id}")
-                assert index is not None, "Either interface_id or index must be provided"
-                return Locator(f"#config_host_interface_{index} input[id^='config_host_mask_']")
+            def get_mask_field_xpath(id: int = 0):
+                """XPATH for specific subnet mask from config panel.
+                Args:
+                    id (int): Position of link in links list. Starts from 0."""
+                assert id >= 0, "Subnet mask field can't have index less than 0."
+                return f"/html/body/main/section/div[2]/div[2]/div[2]/form/div[{4 + id * 2}]/input[2]"
 
             MODAL_ERROR_DIALOG = Locator("#config_content > div")
 
diff --git a/front/tests/utils/networks.py b/front/tests/utils/networks.py
index 66880428..e2ad1ffc 100644
--- a/front/tests/utils/networks.py
+++ b/front/tests/utils/networks.py
@@ -443,9 +443,9 @@ def fill_default_gw(self, ip: str):
         """Fill default gateway with data."""
         self.__check_config_open()
 
-        assert (
-            self.__config_locator.DEFAULT_GATEWAY_FIELD
-        ), f'Unable to change default gateway for this element: "{self.__config_locator}".'
+        assert self.__config_locator.DEFAULT_GATEWAY_FIELD, (
+            f'Unable to change default gateway for this element: "{self.__config_locator}".'
+        )
 
         gw_field = self.__selenium.find_element(
             By.CSS_SELECTOR, self.__config_locator.DEFAULT_GATEWAY_FIELD.selector
@@ -457,9 +457,9 @@ def change_name(self, name: str):
         """Change device name."""
         self.__check_config_open()
 
-        assert (
-            self.__config_locator.NAME_FIELD
-        ), f'Unable to change name for this element: "{self.__config_locator}".'
+        assert self.__config_locator.NAME_FIELD, (
+            f'Unable to change name for this element: "{self.__config_locator}".'
+        )
 
         name_field = self.__selenium.find_element(
             By.CSS_SELECTOR, self.__config_locator.NAME_FIELD.selector
@@ -594,9 +594,9 @@ def __open_config(self, node: dict):
         else:
             raise Exception("Can't find device type !!!")
 
-        assert (
-            self.__config_locator.MAIN_FORM
-        ), f'Unable to open node config form for this element: "{self.__config_locator}".'
+        assert self.__config_locator.MAIN_FORM, (
+            f'Unable to open node config form for this element: "{self.__config_locator}".'
+        )
 
         self.__selenium.wait_until_appear(
             By.CSS_SELECTOR, self.__config_locator.MAIN_FORM.selector

From 769c9b626ba1e4cffb21d0aefb3eaf8894ea2fcb Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Wed, 5 Nov 2025 09:24:45 +0300
Subject: [PATCH 12/33] fix: returned networks.py to original

---
 front/tests/utils/networks.py | 63 +++++------------------------------
 1 file changed, 8 insertions(+), 55 deletions(-)

diff --git a/front/tests/utils/networks.py b/front/tests/utils/networks.py
index e2ad1ffc..35fa4766 100644
--- a/front/tests/utils/networks.py
+++ b/front/tests/utils/networks.py
@@ -274,62 +274,15 @@ def fill_link(self, ip: str, mask: int, link_id: int = 0):
             link_id: Link number in the config list (starts from 0)."""
         self.__check_config_open()
 
-        node_type = self.__node.get("config", {}).get("type", "")
-        type_mapping = {
-            "host": "config_host",
-            "router": "config_router",
-            "server": "config_server",
-            "l1_hub": "config_hub",
-            "l2_switch": "config_switch",
-        }
-        prefix = type_mapping.get(node_type)
-
-        if not prefix:
-            raise Exception(f"Unsupported node type '{node_type}' for link filling")
-
         try:
-            self.__selenium.execute_script(
-                """
-                const ipValue = arguments[0];
-                const maskValue = arguments[1].toString();
-                const elementPrefix = arguments[2];
-                const index = arguments[3];
-
-                const container = document.querySelector('#config_content');
-                if (!container) {
-                    throw new Error('Config content container not found');
-                }
-
-                const ipInputs = container.querySelectorAll(
-                    "input[id^='" + elementPrefix + "_ip_']"
-                );
-                const maskInputs = container.querySelectorAll(
-                    "input[id^='" + elementPrefix + "_mask_']"
-                );
-
-                if (index >= ipInputs.length || index >= maskInputs.length) {
-                    throw new Error('Requested interface index is out of range');
-                }
-
-                ipInputs[index].value = '';
-                ipInputs[index].dispatchEvent(new Event('input', { bubbles: true }));
-                ipInputs[index].value = ipValue;
-                ipInputs[index].dispatchEvent(new Event('input', { bubbles: true }));
-
-                maskInputs[index].value = '';
-                maskInputs[index].dispatchEvent(new Event('input', { bubbles: true }));
-                maskInputs[index].value = maskValue;
-                maskInputs[index].dispatchEvent(new Event('input', { bubbles: true }));
-                """,
-                ip,
-                mask,
-                prefix,
-                link_id,
-            )
-        except Exception as exc:
-            raise Exception(
-                "Unable to locate interface inputs. Ensure the node has enough links configured."
-            ) from exc
+            self.__selenium.find_element(
+                By.XPATH, Location.Network.ConfigPanel.get_ip_field_xpath(link_id)
+            ).send_keys(ip)
+            self.__selenium.find_element(
+                By.XPATH, Location.Network.ConfigPanel.get_mask_field_xpath(link_id)
+            ).send_keys(str(mask))
+        except Exception:
+            raise Exception("Unable to find link. Maybe you forgot to add edges.")
 
     def fill_links(self, ip_mask_list: list):
         """Fill multiple links (in config panel) with IP addresses and masks.

From c6c02d8f81adf6868559b077471cb7544855c39a Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Wed, 5 Nov 2025 09:44:25 +0300
Subject: [PATCH 13/33] fix: fixed incorrect subnet masks

---
 front/src/static/netfront_f.js | 39 +++++++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/front/src/static/netfront_f.js b/front/src/static/netfront_f.js
index 0a53bd8a..758f5fc9 100644
--- a/front/src/static/netfront_f.js
+++ b/front/src/static/netfront_f.js
@@ -8,7 +8,34 @@ let packets_not_filtered = null;
 let filterState = {
     hideARP: false,
     hideSTP: false,
-}
+};
+
+const normalizeInterfaceMasks = function (data, prefix) {
+    try {
+        const params = new URLSearchParams(data);
+
+        params.forEach((value, key) => {
+            if (!key.startsWith(prefix + '_ip_')) {
+                return;
+            }
+
+            const maskKey = key.replace('_ip_', '_mask_');
+            if (!params.has(maskKey)) {
+                return;
+            }
+
+            const maskVal = params.get(maskKey);
+            if (!maskVal || maskVal === '0') {
+                params.set(maskKey, '24');
+            }
+        });
+
+        return params.toString();
+    } catch (err) {
+        console.warn('Unable to normalize interface masks', err);
+        return data;
+    }
+};
 
 
 const uid = function () {
@@ -1379,6 +1406,8 @@ const UpdateHostConfiguration = function (data, host_id)
     // Reset network player
     SetNetworkPlayerState(-1);
 
+    data = normalizeInterfaceMasks(data, 'config_host');
+
     $.ajax({
         type: 'POST',
         url: '/host/save_config',
@@ -1581,6 +1610,8 @@ const UpdateRouterConfiguration = function (data, router_id)
     // Reset network player
     SetNetworkPlayerState(-1);
 
+    data = normalizeInterfaceMasks(data, 'config_router');
+
     $.ajax({
         type: 'POST',
         url: '/host/router_save_config',
@@ -1640,6 +1671,8 @@ const UpdateServerConfiguration = function (data, router_id)
     // Reset network player
     SetNetworkPlayerState(-1);
 
+    data = normalizeInterfaceMasks(data, 'config_server');
+
     $.ajax({
         type: 'POST',
         url: '/host/server_save_config',
@@ -1696,6 +1729,8 @@ const UpdateServerConfiguration = function (data, router_id)
 // Update hub configuration
 const UpdateHubConfiguration = function (data, hub_id)
 {
+    data = normalizeInterfaceMasks(data, 'config_hub');
+
     $.ajax({
         type: 'POST',
         url: '/host/hub_save_config',
@@ -1742,6 +1777,8 @@ const UpdateSwitchConfiguration = function (data, switch_id)
     // Reset network player
     SetNetworkPlayerState(-1);
 
+    data = normalizeInterfaceMasks(data, 'config_switch');
+
     $.ajax({
         type: 'POST',
         url: '/host/switch_save_config',

From 77bca51da49f0896da5a5589451f2c35b50d705d Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Wed, 5 Nov 2025 09:54:19 +0300
Subject: [PATCH 14/33] restored everything to original

---
 front/src/static/netfront_f.js     | 102 +------------------
 front/src/templates/base.html      |  20 +---
 front/tests/test_packet_filters.py | 156 -----------------------------
 3 files changed, 3 insertions(+), 275 deletions(-)
 delete mode 100644 front/tests/test_packet_filters.py

diff --git a/front/src/static/netfront_f.js b/front/src/static/netfront_f.js
index 758f5fc9..b256d592 100644
--- a/front/src/static/netfront_f.js
+++ b/front/src/static/netfront_f.js
@@ -4,41 +4,7 @@ let global_eh = undefined;
 var NetworkUpdateTimeoutId = -1;
 let NetworkCache = [];
 
-let packets_not_filtered = null;
-let filterState = {
-    hideARP: false,
-    hideSTP: false,
-};
-
-const normalizeInterfaceMasks = function (data, prefix) {
-    try {
-        const params = new URLSearchParams(data);
-
-        params.forEach((value, key) => {
-            if (!key.startsWith(prefix + '_ip_')) {
-                return;
-            }
-
-            const maskKey = key.replace('_ip_', '_mask_');
-            if (!params.has(maskKey)) {
-                return;
-            }
-
-            const maskVal = params.get(maskKey);
-            if (!maskVal || maskVal === '0') {
-                params.set(maskKey, '24');
-            }
-        });
-
-        return params.toString();
-    } catch (err) {
-        console.warn('Unable to normalize interface masks', err);
-        return data;
-    }
-};
-
-
-const uid = function () {
+const uid = function(){
     return Date.now().toString(36) + Math.random().toString(36).substr(2);
 }
 
@@ -1310,10 +1276,7 @@ const CheckSimulation = function (simulation_id)
             {
                 packets = JSON.parse(data.packets);
                 pcaps = data.pcaps;
-
-                // Set filters
-                packets_not_filtered = null;
-                SetPacketFilter();
+                SetNetworkPlayerState(0);
 
                 const answerButton = document.querySelector('button[name="answerQuestion"]');
                 if (answerButton) {
@@ -1406,8 +1369,6 @@ const UpdateHostConfiguration = function (data, host_id)
     // Reset network player
     SetNetworkPlayerState(-1);
 
-    data = normalizeInterfaceMasks(data, 'config_host');
-
     $.ajax({
         type: 'POST',
         url: '/host/save_config',
@@ -1610,8 +1571,6 @@ const UpdateRouterConfiguration = function (data, router_id)
     // Reset network player
     SetNetworkPlayerState(-1);
 
-    data = normalizeInterfaceMasks(data, 'config_router');
-
     $.ajax({
         type: 'POST',
         url: '/host/router_save_config',
@@ -1671,8 +1630,6 @@ const UpdateServerConfiguration = function (data, router_id)
     // Reset network player
     SetNetworkPlayerState(-1);
 
-    data = normalizeInterfaceMasks(data, 'config_server');
-
     $.ajax({
         type: 'POST',
         url: '/host/server_save_config',
@@ -1729,8 +1686,6 @@ const UpdateServerConfiguration = function (data, router_id)
 // Update hub configuration
 const UpdateHubConfiguration = function (data, hub_id)
 {
-    data = normalizeInterfaceMasks(data, 'config_hub');
-
     $.ajax({
         type: 'POST',
         url: '/host/hub_save_config',
@@ -1777,8 +1732,6 @@ const UpdateSwitchConfiguration = function (data, switch_id)
     // Reset network player
     SetNetworkPlayerState(-1);
 
-    data = normalizeInterfaceMasks(data, 'config_switch');
-
     $.ajax({
         type: 'POST',
         url: '/host/switch_save_config',
@@ -1845,56 +1798,6 @@ const RunSimulation = function (network_guid)
     });
 }
 
-
-const FilterPackets = function () {
-    if (filterState.hideARP)
-        packets = packets.map((step) =>
-            step.filter((pkt) =>
-                !(pkt.data.label.startsWith('ARP'))
-            )
-        ).filter(step => step.length > 0);
-
-
-    if (filterState.hideSTP)
-        packets = packets.map((step) =>
-            step.filter((pkt) =>
-                !(pkt.data.label.startsWith('STP') ||
-                    pkt.data.label.startsWith('RSTP'))
-            )
-        ).filter(step => step.length > 0);
-    console.log("filterState:", filterState);
-    console.log("Packets after filters:", packets);
-
-}
-
-const RecoverFilterStates = function () {
-    $("#ARPFilterCheckbox").prop('checked', filterState.hideARP);
-    $("#STPFilterCheckbox").prop('checked', filterState.hideSTP);
-}
-
-const SetPacketFilter = function () {
-    console.log("Packet filter call");
-    // SetPacketFilter first call on emulated network
-    if (packets && !packets_not_filtered) {
-        packets_not_filtered = JSON.parse(JSON.stringify(packets)); // Array deep copy
-    }
-    // Numerous filter call, we grab our packets copy to filter it
-    else if (packets_not_filtered) {
-        packets = JSON.parse(JSON.stringify(packets_not_filtered));
-    }
-
-    filterState.hideARP = $('#ARPFilterCheckbox').is(':checked');
-    filterState.hideSTP = $('#STPFilterCheckbox').is(':checked');
-
-    console.log("filterState after filter call:", filterState);
-    if (packets) {
-        console.log('packets here');
-        FilterPackets();
-
-        SetNetworkPlayerState(0);
-    }
-}
-
 // 2 states:
 // Do we need emulation
 // We have a packets and ready to play packets
@@ -1904,7 +1807,6 @@ const SetNetworkPlayerState = function(simultaion_id)
     // Reset?
     if (simultaion_id === -1){
         packets = null;
-        packets_not_filtered = null;
         pcaps = [];
         SetNetworkPlayerState(0);
         return;
diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index d57daadb..7e97ccda 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -133,18 +133,6 @@ <h5 class="modal-title" id="netConfigModalLabel">Настройки сети</h5
                             <label for="network_description" class="text-sm pt-2">Описание сети</label>
                             <textarea rows="3" class="form-control form-control-sm" id="network_description" name="network_description">{{ network.description }}</textarea>
                         </div>
-                        <hr class="my-3">
-                        <div>
-                            <h6>Настройки анимации</h6>
-                            <div>
-                                <input class="form-check-input" role="switch" type="checkbox" id="ARPFilterCheckbox" name="ARPFilterCheckbox">
-                                <label for="ARPFilterCheckbox"> Пропустить ARP пакеты </label>
-                            </div>
-                            <div>
-                                <input class="form-check-input" role="switch" type="checkbox" id="STPFilterCheckbox" name="STPFilterCheckbox">
-                                <label for="STPFilterCheckbox"> Пропустить STP/RSTP пакеты </label>
-                            </div>
-                        </div>
                     </form>
                 </div>
                 <div class="modal-footer">
@@ -291,11 +279,7 @@ <h6 class="mb-2">Наше компьюнити</h6>
 
 <script>
     $(document).ready(function() {
-        $("#netConfigModal").on("hidden.bs.modal", function() {
-            RecoverFilterStates();
-        })
-
-        $("#networkConfigurationCancel").click(function(){
+        $("#networkConfigrationCancel").click(function(){
             $('#netConfigModal').modal('hide');
         });
 
@@ -307,7 +291,6 @@ <h6 class="mb-2">Наше компьюнити</h6>
             network_title = $("#network_title").val();
             network_description = $("#network_description").val();
             UpdateNetworkConfig();
-            SetPacketFilter();
             $('#netConfigModal').modal('hide');
             $('#network_title_head').text(network_title);
         });
@@ -318,7 +301,6 @@ <h6 class="mb-2">Наше компьюнити</h6>
                 network_title = $("#network_title").val();
                 network_description = $("#network_description").val();
                 UpdateNetworkConfig();
-                SetPacketFilter();
                 $('#netConfigModal').modal('hide');
                 $('#network_title_head').text(network_title);
                 return false;
diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
deleted file mode 100644
index c3cc3d16..00000000
--- a/front/tests/test_packet_filters.py
+++ /dev/null
@@ -1,156 +0,0 @@
-import pytest
-from selenium.webdriver.common.by import By
-
-from conftest import MiminetTester
-from utils.locators import Location
-from utils.networks import MiminetTestNetwork
-
-
-class TestPacketFilters:
-    @pytest.fixture(scope="class")
-    def network(self, selenium: MiminetTester):
-        test_network = MiminetTestNetwork(selenium)
-        yield test_network
-        test_network.delete()
-
-    def _wait_filter_state_ready(self, selenium: MiminetTester):
-        selenium.wait_for(
-            lambda driver: driver.execute_script(
-                "return typeof filterState !== 'undefined' && "
-                "typeof SetPacketFilter === 'function';"
-            )
-        )
-
-    def _open_settings_modal(self, selenium: MiminetTester):
-        selenium.find_element(
-            By.CSS_SELECTOR, Location.Network.TopButton.OPTIONS.selector
-        ).click()
-        selenium.wait_until_appear(By.CSS_SELECTOR, "#netConfigModal")
-
-    def _close_settings_modal(self, selenium: MiminetTester):
-        selenium.execute_script("$('#netConfigModal').modal('hide');")
-        selenium.wait_for(
-            lambda driver: driver.execute_script(
-                "return !document.querySelector('#netConfigModal')"
-                " || $('#netConfigModal').is(':hidden');"
-            )
-        )
-
-    def _checkbox_state(self, selenium: MiminetTester, checkbox_id: str):
-        return selenium.execute_script(
-            f"var el = document.getElementById('{checkbox_id}');"
-            "return el ? el.checked : null;"
-        )
-
-    def _prepare_packets(self, selenium: MiminetTester, labels: list[str]):
-        selenium.execute_script(
-            """
-            filterState.hideARP = false;
-            filterState.hideSTP = false;
-            packets_not_filtered = null;
-            packets = arguments[0].map(function(label){ return [{ data: { label: label } }]; });
-            pcaps = [];
-            """,
-            labels,
-        )
-
-    def test_enable_arp_filter_filters_packets(
-        self, selenium: MiminetTester, network: MiminetTestNetwork
-    ):
-        selenium.get(network.url)
-        self._wait_filter_state_ready(selenium)
-
-        self._prepare_packets(
-            selenium, ["ARP Request: who-has 10.0.0.1", "ICMP Echo Reply"]
-        )
-
-        self._open_settings_modal(selenium)
-        arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
-        if not arp_checkbox.is_selected():
-            arp_checkbox.click()
-        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
-        self._close_settings_modal(selenium)
-        selenium.wait_for(
-            lambda driver: driver.execute_script(
-                "return filterState.hideARP === true"
-                " && Array.isArray(packets)"
-                " && packets.length === 1"
-                " && packets[0].length === 1"
-                " && !packets[0][0].data.label.startsWith('ARP');"
-            )
-        )
-
-        filtered_packets = selenium.execute_script("return packets;")
-        assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
-
-        self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "ARPFilterCheckbox") is True
-        ), "ARP checkbox should remain selected after saving"
-        self._close_settings_modal(selenium)
-
-    def test_cancel_does_not_change_filter_state(
-        self, selenium: MiminetTester, network: MiminetTestNetwork
-    ):
-        selenium.get(network.url)
-        self._wait_filter_state_ready(selenium)
-
-        initial_state = selenium.execute_script("return filterState.hideARP === true;")
-
-        self._open_settings_modal(selenium)
-        arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
-        arp_checkbox.click()  # toggle current state
-        self._close_settings_modal(selenium)
-
-        current_state = selenium.execute_script("return filterState.hideARP === true;")
-        assert (
-            current_state == initial_state
-        ), "Filter state must not change when closing without saving"
-
-        self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state
-        ), "ARP checkbox should display the original value after cancel"
-        self._close_settings_modal(selenium)
-
-    def test_enable_stp_filter_filters_packets(
-        self, selenium: MiminetTester, network: MiminetTestNetwork
-    ):
-        selenium.get(network.url)
-        self._wait_filter_state_ready(selenium)
-
-        self._prepare_packets(
-            selenium,
-            [
-                "STP Configuration BPDU",
-                "RSTP Topology Change",
-                "ICMP Echo Reply",
-            ],
-        )
-
-        self._open_settings_modal(selenium)
-        stp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#STPFilterCheckbox")
-        if not stp_checkbox.is_selected():
-            stp_checkbox.click()
-        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
-        self._close_settings_modal(selenium)
-
-        selenium.wait_for(
-            lambda driver: driver.execute_script(
-                "return filterState.hideSTP === true"
-                " && Array.isArray(packets)"
-                " && packets.length === 1"
-                " && packets[0].length === 1"
-                " && !packets[0][0].data.label.startsWith('STP')"
-                " && !packets[0][0].data.label.startsWith('RSTP');"
-            )
-        )
-
-        filtered_packets = selenium.execute_script("return packets;")
-        assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
-
-        self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "STPFilterCheckbox") is True
-        ), "STP checkbox should remain selected after saving"
-        self._close_settings_modal(selenium)

From e34c2609f41e62e18d6ef94d174dd3dcc83a1016 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Wed, 5 Nov 2025 10:10:49 +0300
Subject: [PATCH 15/33] restored utils to very original

---
 front/tests/utils/locators.py |  4 ++--
 front/tests/utils/networks.py | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/front/tests/utils/locators.py b/front/tests/utils/locators.py
index e3e44691..ab31a174 100644
--- a/front/tests/utils/locators.py
+++ b/front/tests/utils/locators.py
@@ -48,7 +48,7 @@ def get_network_button_xpath(id: int):
             Args:
                 id (int): Position of network in networks list. Starts from 0."""
             assert id >= 0, "Network button can't have index less than 0."
-            return f"/html/body/section/div/div/div[{id + 2}]"
+            return f"/html/body/section/div/div/div[{id+2}]"
 
     class Network:
         """Specific network page."""
@@ -143,7 +143,7 @@ def get_table_row_xpath(switch_name: str, id: int):
                         Args:
                             id (int): Position of row in VLAN table. Starts from 0."""
                         assert id >= 0, "Row can't have index less than 0."
-                        return f'//*[@id="config_table_vlan_{switch_name}"]/table/tbody/tr[{id + 1}]'
+                        return f'//*[@id="config_table_vlan_{switch_name}"]/table/tbody/tr[{id+1}]'
 
             class Host(CommonDevice):
                 MAIN_FORM = Locator("#config_main_form")
diff --git a/front/tests/utils/networks.py b/front/tests/utils/networks.py
index 35fa4766..39b94d64 100644
--- a/front/tests/utils/networks.py
+++ b/front/tests/utils/networks.py
@@ -396,9 +396,9 @@ def fill_default_gw(self, ip: str):
         """Fill default gateway with data."""
         self.__check_config_open()
 
-        assert self.__config_locator.DEFAULT_GATEWAY_FIELD, (
-            f'Unable to change default gateway for this element: "{self.__config_locator}".'
-        )
+        assert (
+            self.__config_locator.DEFAULT_GATEWAY_FIELD
+        ), f'Unable to change default gateway for this element: "{self.__config_locator}".'
 
         gw_field = self.__selenium.find_element(
             By.CSS_SELECTOR, self.__config_locator.DEFAULT_GATEWAY_FIELD.selector
@@ -410,9 +410,9 @@ def change_name(self, name: str):
         """Change device name."""
         self.__check_config_open()
 
-        assert self.__config_locator.NAME_FIELD, (
-            f'Unable to change name for this element: "{self.__config_locator}".'
-        )
+        assert (
+            self.__config_locator.NAME_FIELD
+        ), f'Unable to change name for this element: "{self.__config_locator}".'
 
         name_field = self.__selenium.find_element(
             By.CSS_SELECTOR, self.__config_locator.NAME_FIELD.selector
@@ -547,9 +547,9 @@ def __open_config(self, node: dict):
         else:
             raise Exception("Can't find device type !!!")
 
-        assert self.__config_locator.MAIN_FORM, (
-            f'Unable to open node config form for this element: "{self.__config_locator}".'
-        )
+        assert (
+            self.__config_locator.MAIN_FORM
+        ), f'Unable to open node config form for this element: "{self.__config_locator}".'
 
         self.__selenium.wait_until_appear(
             By.CSS_SELECTOR, self.__config_locator.MAIN_FORM.selector

From c89d15d7f2dfad73b4d875974d40ac2fb31f38b4 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Wed, 5 Nov 2025 12:03:45 +0300
Subject: [PATCH 16/33] test: refactored packet filter tests & added a new test

---
 front/src/static/netfront_f.js     | 1770 ++++++++++++++--------------
 front/src/templates/base.html      |   20 +-
 front/tests/test_packet_filters.py |  211 ++++
 3 files changed, 1128 insertions(+), 873 deletions(-)
 create mode 100644 front/tests/test_packet_filters.py

diff --git a/front/src/static/netfront_f.js b/front/src/static/netfront_f.js
index b256d592..47365bf0 100644
--- a/front/src/static/netfront_f.js
+++ b/front/src/static/netfront_f.js
@@ -4,126 +4,123 @@ let global_eh = undefined;
 var NetworkUpdateTimeoutId = -1;
 let NetworkCache = [];
 
-const uid = function(){
-    return Date.now().toString(36) + Math.random().toString(36).substr(2);
-}
+let packets_not_filtered = null;
+let filterState = {
+    hideARP: false,
+    hideSTP: false,
+};
 
-const HostUid = function(){
+const uid = function () {
+    return Date.now().toString(36) + Math.random().toString(36).substr(2);
+};
 
+const HostUid = function () {
     let host_name = "host_";
 
     for (let host_number = 1; host_number < 100; host_number++) {
         host = host_name + host_number;
 
-        t = nodes.find(t => t.data.id === host);
+        t = nodes.find((t) => t.data.id === host);
 
-        if (!t)
-        {
+        if (!t) {
             return host;
         }
     }
 
     return "host_" + uid();
-}
-
-const RouterUid = function(){
+};
 
+const RouterUid = function () {
     let host_name = "router_";
 
     for (let host_number = 1; host_number < 100; host_number++) {
         host = host_name + host_number;
 
-        t = nodes.find(t => t.data.id === host);
+        t = nodes.find((t) => t.data.id === host);
 
-        if (!t)
-        {
+        if (!t) {
             return host;
         }
     }
 
     return "router_" + uid();
-}
-
-const ServerUid = function(){
+};
 
+const ServerUid = function () {
     let host_name = "server_";
 
     for (let host_number = 1; host_number < 100; host_number++) {
         host = host_name + host_number;
 
-        let t = nodes.find(t => t.data.id === host);
+        let t = nodes.find((t) => t.data.id === host);
 
-        if (!t)
-        {
+        if (!t) {
             return host;
         }
     }
 
     return "server_" + uid();
-}
+};
 
 const ActionWithInterface = function (n, i, fun) {
-
     let iface_id = n.interface[i].id;
 
-    if (!iface_id){
+    if (!iface_id) {
         return;
     }
 
     let connect_id = n.interface[i].connect;
 
-    if (!connect_id){
+    if (!connect_id) {
         return;
     }
 
-    let edge = edges.find(e => e.data.id === connect_id);
+    let edge = edges.find((e) => e.data.id === connect_id);
 
-    if (!edge){
+    if (!edge) {
         return;
     }
 
     let source_host = edge.data.source;
     let target_host = edge.data.target;
 
-    if (!source_host || !target_host){
+    if (!source_host || !target_host) {
         return;
     }
 
     let connected_to = target_host;
-    if (n.data.id === target_host){
+    if (n.data.id === target_host) {
         connected_to = source_host;
     }
 
-    let connected_to_host = nodes.find(n => n.data.id === connected_to);
+    let connected_to_host = nodes.find((n) => n.data.id === connected_to);
     let connected_to_host_label = "Unknown";
 
-    if (connected_to_host){
+    if (connected_to_host) {
         connected_to_host_label = connected_to_host.data.label;
     }
 
     ip_addr = n.interface[i].ip;
 
-    if (!ip_addr){
-        ip_addr = '';
+    if (!ip_addr) {
+        ip_addr = "";
     }
 
     netmask = n.interface[i].netmask;
 
-    if (!netmask){
-        netmask = '';
+    if (!netmask) {
+        netmask = "";
     }
 
     fun(iface_id, ip_addr, netmask, connected_to_host_label);
+};
 
-}
-
-const ShowHostConfig = function(n, shared = 0){
-
+const ShowHostConfig = function (n, shared = 0) {
     let hostname = n.config.label;
     hostname = hostname || n.data.id;
 
     // Create form
-    if (shared){
+    if (shared) {
         SharedConfigHostForm(n.data.id);
     } else {
         ConfigHostForm(n.data.id);
@@ -135,41 +132,39 @@ const ShowHostConfig = function(n, shared = 0){
     // Add jobs
     let host_jobs = [];
 
-    if (jobs){
-        host_jobs = jobs.filter(j => j.host_id === n.data.id);
+    if (jobs) {
+        host_jobs = jobs.filter((j) => j.host_id === n.data.id);
     }
 
     ConfigHostJob(host_jobs, shared);
 
     // Add interfaces
-    $.each(n.interface, function(i) {
-        ActionWithInterface(n, i, ConfigHostInterface)
+    $.each(n.interface, function (i) {
+        ActionWithInterface(n, i, ConfigHostInterface);
     });
 
-    if(n.interface.length)
-    {
-        let default_gw = '';
+    if (n.interface.length) {
+        let default_gw = "";
 
-        if ("default_gw" in n.config){
+        if ("default_gw" in n.config) {
             default_gw = n.config.default_gw;
         }
 
         ConfigHostGateway(default_gw);
     }
 
-    if (shared){
+    if (shared) {
         DisableFormInputs();
     }
-}
-
-const ShowRouterConfig = function(n, shared = 0){
+};
 
+const ShowRouterConfig = function (n, shared = 0) {
     let hostname = n.config.label;
     hostname = hostname || n.data.id;
 
     // Create form
-    if (shared){
-        SharedConfigRouterForm(n.data.id)
+    if (shared) {
+        SharedConfigRouterForm(n.data.id);
     } else {
         ConfigRouterForm(n.data.id);
     }
@@ -180,22 +175,21 @@ const ShowRouterConfig = function(n, shared = 0){
     // Add jobs
     let router_jobs = [];
 
-    if (jobs){
-        router_jobs = jobs.filter(j => j.host_id === n.data.id);
+    if (jobs) {
+        router_jobs = jobs.filter((j) => j.host_id === n.data.id);
     }
 
     ConfigRouterJob(router_jobs, shared);
 
     // Add interfaces
     $.each(n.interface, function (i) {
-        ActionWithInterface(n, i, ConfigRouterInterface)
+        ActionWithInterface(n, i, ConfigRouterInterface);
     });
 
-    if(n.interface.length)
-    {
-        let default_gw = '';
+    if (n.interface.length) {
+        let default_gw = "";
 
-        if ("default_gw" in n.config){
+        if ("default_gw" in n.config) {
             default_gw = n.config.default_gw;
         }
 
@@ -204,19 +198,18 @@ const ShowRouterConfig = function(n, shared = 0){
 
     ConfigVxlan(n);
 
-    if (shared){
+    if (shared) {
         DisableFormInputs();
         DisableVXLANInputs(n);
     }
-}
-
-const ShowServerConfig = function(n, shared = 0){
+};
 
+const ShowServerConfig = function (n, shared = 0) {
     let hostname = n.config.label;
     hostname = hostname || n.data.id;
 
     // Create form
-    if (shared){
+    if (shared) {
         SharedConfigServerForm(n.data.id);
     } else {
         ConfigServerForm(n.data.id);
@@ -228,40 +221,38 @@ const ShowServerConfig = function(n, shared = 0){
     // Add jobs
     let host_jobs = [];
 
-    if (jobs){
-        host_jobs = jobs.filter(j => j.host_id === n.data.id);
+    if (jobs) {
+        host_jobs = jobs.filter((j) => j.host_id === n.data.id);
     }
 
     ConfigServerJob(host_jobs, shared);
 
     // Add interfaces
     $.each(n.interface, function (i) {
-        ActionWithInterface(n, i, ConfigServerInterface)
+        ActionWithInterface(n, i, ConfigServerInterface);
     });
 
-    if(n.interface.length)
-    {
-        let default_gw = '';
+    if (n.interface.length) {
+        let default_gw = "";
 
-        if ("default_gw" in n.config){
+        if ("default_gw" in n.config) {
             default_gw = n.config.default_gw;
         }
 
         ConfigServerGateway(default_gw);
     }
 
-    if (shared){
+    if (shared) {
         DisableFormInputs();
     }
-}
-
-const ShowHubConfig = function(n, shared = 0){
+};
 
+const ShowHubConfig = function (n, shared = 0) {
     let hostname = n.config.label;
     hostname = hostname || n.data.id;
 
     // Create form
-    if (shared){
+    if (shared) {
         SharedConfigHubForm(n.data.id);
     } else {
         ConfigHubForm(n.data.id);
@@ -272,25 +263,24 @@ const ShowHubConfig = function(n, shared = 0){
 
     // Add interfaces
     $.each(n.interface, function (i) {
-        ActionWithInterface(n, i, ConfigHubInterface)
+        ActionWithInterface(n, i, ConfigHubInterface);
     });
 
-    if(n.interface.length){
+    if (n.interface.length) {
         ConfigHubIndent();
     }
 
-    if (shared){
+    if (shared) {
         DisableFormInputs();
     }
-}
-
-const ShowSwitchConfig = function(n, shared = 0){
+};
 
+const ShowSwitchConfig = function (n, shared = 0) {
     let hostname = n.config.label;
     hostname = hostname || n.data.id;
 
     // Create form
-    if (shared){
+    if (shared) {
         SharedConfigSwitchForm(n.data.id);
     } else {
         ConfigSwitchForm(n.data.id);
@@ -300,10 +290,10 @@ const ShowSwitchConfig = function(n, shared = 0){
     ConfigSwitchName(hostname);
 
     //Add checkbox STP
-//    ConfigSwtichSTP(n.config.stp);
+    //    ConfigSwtichSTP(n.config.stp);
 
     //Add checkbox RSTP
-//    ConfigSwtichRSTP(n.config.rstp);
+    //    ConfigSwtichRSTP(n.config.rstp);
     ConfigRSTP(n);
 
     // Add VLAN
@@ -311,277 +301,272 @@ const ShowSwitchConfig = function(n, shared = 0){
 
     // Add interfaces
     $.each(n.interface, function (i) {
-        ActionWithInterface(n, i, ConfigSwitchInterface)
+        ActionWithInterface(n, i, ConfigSwitchInterface);
     });
 
-    if(n.interface.length){
+    if (n.interface.length) {
         ConfigSwitchIndent();
     }
 
-    if (shared){
+    if (shared) {
         DisableFormInputs();
         DisableVLANInputs(n);
     }
-}
-
-const ShowEdgeConfig = function(edge_id, shared = 0){
+};
 
-    let ed = edges.find(ed => ed.data.id === edge_id);
+const ShowEdgeConfig = function (edge_id, shared = 0) {
+    let ed = edges.find((ed) => ed.data.id === edge_id);
 
-    if (!ed){
+    if (!ed) {
         return;
     }
 
     let edge_source = ed.data.source;
     let edge_target = ed.data.target;
-    let edge_loss = ed.data.loss_percentage || 0
+    let edge_loss = ed.data.loss_percentage || 0;
 
     // Create form
-    if (shared){
+    if (shared) {
         SharedConfigEdgeForm(edge_id);
     } else {
         ConfigEdgeForm(edge_id);
     }
 
-
     // Add loss percentage info
-    ConfigEdgePercentage(edge_loss)
+    ConfigEdgePercentage(edge_loss);
 
     // Add source and target info
     ConfigEdgeEndpoints(edge_source, edge_target);
 
-    if (shared){
+    if (shared) {
         DisableFormInputs();
     }
-}
+};
 
-const PacketUid = function(){
+const PacketUid = function () {
     return "pkt_" + uid();
-}
-
-const l1HubUid = function(){
+};
 
+const l1HubUid = function () {
     let hub_name = "l1hub";
 
     for (let hub_number = 1; hub_number < 100; hub_number++) {
         hub = hub_name + hub_number;
 
-        t = nodes.find(t => t.data.id === hub);
+        t = nodes.find((t) => t.data.id === hub);
 
-        if (!t)
-        {
+        if (!t) {
             return hub;
         }
     }
 
     return "hub_" + uid();
-}
-
-const l2SwitchUid = function(){
+};
 
+const l2SwitchUid = function () {
     let sw_name = "l2sw";
 
     for (let sw_number = 1; sw_number < 100; sw_number++) {
         sw = sw_name + sw_number;
 
-        t = nodes.find(t => t.data.id === sw);
+        t = nodes.find((t) => t.data.id === sw);
 
-        if (!t)
-        {
+        if (!t) {
             return sw;
         }
     }
 
     return "sw_" + uid();
-}
-
-const l2SwitchPortUid = function(switch_id){
+};
 
-    let t = nodes.find(t => t.data.id === switch_id);
+const l2SwitchPortUid = function (switch_id) {
+    let t = nodes.find((t) => t.data.id === switch_id);
 
-    if (!t)
-    {
+    if (!t) {
         return -1;
     }
 
     for (let port_number = 1; port_number < 128; port_number++) {
         port = t.data.id + "_" + port_number;
 
-        let i = t.interface.find(i => i.id === port);
+        let i = t.interface.find((i) => i.id === port);
 
-        if (!i){
+        if (!i) {
             return port;
         }
     }
-}
-
-const l1HubPortUid = function(hub_id){
+};
 
-    let t = nodes.find(t => t.data.id === hub_id);
+const l1HubPortUid = function (hub_id) {
+    let t = nodes.find((t) => t.data.id === hub_id);
 
-    if (!t)
-    {
+    if (!t) {
         return -1;
     }
 
     for (let port_number = 1; port_number < 128; port_number++) {
         port = t.data.id + "_" + port_number;
 
-        let i = t.interface.find(i => i.id === port);
+        let i = t.interface.find((i) => i.id === port);
 
-        if (!i){
+        if (!i) {
             return port;
         }
     }
-}
+};
 
-const EdgeUid = function(){
+const EdgeUid = function () {
     return "edge_" + uid();
-}
+};
 
-const InterfaceUid = function(){
+const InterfaceUid = function () {
     return "iface_" + Math.random().toString(9).substring(2, 10);
-}
+};
 
-const PostNodesEdges = function(){
+const PostNodesEdges = function () {
     $.ajax({
-        type: 'POST',
-        url: '/post_nodes_edges?guid=' + network_guid,
+        type: "POST",
+        url: "/post_nodes_edges?guid=" + network_guid,
         data: JSON.stringify([nodes, edges]),
-        success: function(data) {},
-        error: function(err) {console.log('Cannot post edges to server')},
+        success: function (data) { },
+        error: function (err) {
+            console.log("Cannot post edges to server");
+        },
         contentType: "application/json",
-        dataType: 'json'
+        dataType: "json",
     });
-}
+};
 
-const AddEdge = function(source_id, target_id){
+const AddEdge = function (source_id, target_id) {
+    let source_node = nodes.find((n) => n.data.id === source_id);
+    let target_node = nodes.find((n) => n.data.id === target_id);
 
-        let source_node = nodes.find(n => n.data.id === source_id);
-        let target_node = nodes.find(n => n.data.id === target_id);
+    // Do we find nodes?
+    if (!source_node || !target_node) {
+        return;
+    }
 
-        // Do we find nodes?
-        if (!source_node || !target_node)
-        {
-            return;
-        }
+    // Save the network state.
+    SaveNetworkObject();
 
-        // Save the network state.
-        SaveNetworkObject();
+    // Add edge
+    let edge_id = EdgeUid();
 
-        // Add edge
-        let edge_id = EdgeUid();
+    edges.push({
+        data: {
+            id: edge_id,
+            source: source_node.data.id,
+            target: target_node.data.id,
+        },
+    });
 
-        edges.push({
-            data: {
-                id: edge_id,
-                source: source_node.data.id,
-                target: target_node.data.id,
-            }
+    // Add interface If edge connects to host or to router or to server
+    if (
+        source_node.config.type === "host" ||
+        source_node.config.type === "router" ||
+        source_node.config.type === "server"
+    ) {
+        let iface_id = InterfaceUid();
+        source_node.interface.push({
+            id: iface_id,
+            name: iface_id,
+            connect: edge_id,
         });
+    }
 
-        // Add interface If edge connects to host or to router or to server
-        if (source_node.config.type === 'host' || source_node.config.type === 'router' || source_node.config.type === 'server'){
-            let iface_id = InterfaceUid();
-            source_node.interface.push({
-                  id: iface_id,
-                  name: iface_id,
-                  connect: edge_id,
-            });
-        }
-
-        if (target_node.config.type === 'host' || target_node.config.type === 'router' || target_node.config.type === 'server'){
-            let iface_id = InterfaceUid();
-            target_node.interface.push({
-                id: iface_id,
-                name: iface_id,
-                connect: edge_id,
-            });
-        }
-
-        // Add interface if connected to switch
-        if (target_node.config.type === 'l2_switch'){
-            var vlan = null;
-            var type_connection = null;
+    if (
+        target_node.config.type === "host" ||
+        target_node.config.type === "router" ||
+        target_node.config.type === "server"
+    ) {
+        let iface_id = InterfaceUid();
+        target_node.interface.push({
+            id: iface_id,
+            name: iface_id,
+            connect: edge_id,
+        });
+    }
 
-            if (areInterfaceFieldsFilled(target_node)) {
-                vlan = 1;
-                type_connection = 0;
-            }
+    // Add interface if connected to switch
+    if (target_node.config.type === "l2_switch") {
+        var vlan = null;
+        var type_connection = null;
 
-            let iface_id = l2SwitchPortUid(target_node.data.id);
-            target_node.interface.push({
-                id: iface_id,
-                name: iface_id,
-                connect: edge_id,
-                vlan: vlan,
-                type_connection: type_connection,
-            });
+        if (areInterfaceFieldsFilled(target_node)) {
+            vlan = 1;
+            type_connection = 0;
         }
 
-        if (source_node.config.type === 'l2_switch'){
-            var vlan = null;
-            var type_connection = null;
+        let iface_id = l2SwitchPortUid(target_node.data.id);
+        target_node.interface.push({
+            id: iface_id,
+            name: iface_id,
+            connect: edge_id,
+            vlan: vlan,
+            type_connection: type_connection,
+        });
+    }
 
-            if (areInterfaceFieldsFilled(source_node)) {
-                vlan = 1;
-                type_connection = 0;
-            }
+    if (source_node.config.type === "l2_switch") {
+        var vlan = null;
+        var type_connection = null;
 
-            let iface_id = l2SwitchPortUid(source_node.data.id);
-            source_node.interface.push({
-                id: iface_id,
-                name: iface_id,
-                connect: edge_id,
-                vlan: vlan,
-                type_connection: type_connection,
-            });
+        if (areInterfaceFieldsFilled(source_node)) {
+            vlan = 1;
+            type_connection = 0;
         }
 
-        // Add interface if connected to Hub
-        if (target_node.config.type === 'l1_hub'){
-            let iface_id = l1HubPortUid(target_node.data.id);
-            target_node.interface.push({
-                id: iface_id,
-                name: iface_id,
-                connect: edge_id,
-            });
-        }
+        let iface_id = l2SwitchPortUid(source_node.data.id);
+        source_node.interface.push({
+            id: iface_id,
+            name: iface_id,
+            connect: edge_id,
+            vlan: vlan,
+            type_connection: type_connection,
+        });
+    }
 
-        if (source_node.config.type === 'l1_hub'){
-            let iface_id = l1HubPortUid(source_node.data.id);
-            source_node.interface.push({
-                id: iface_id,
-                name: iface_id,
-                connect: edge_id,
-            });
-        }
-}
+    // Add interface if connected to Hub
+    if (target_node.config.type === "l1_hub") {
+        let iface_id = l1HubPortUid(target_node.data.id);
+        target_node.interface.push({
+            id: iface_id,
+            name: iface_id,
+            connect: edge_id,
+        });
+    }
 
-const DeleteJob = function(node_id){
+    if (source_node.config.type === "l1_hub") {
+        let iface_id = l1HubPortUid(source_node.data.id);
+        source_node.interface.push({
+            id: iface_id,
+            name: iface_id,
+            connect: edge_id,
+        });
+    }
+};
 
+const DeleteJob = function (node_id) {
     let jobs_to_delete = [];
 
-    $.each(jobs , function(idx, job) {
-
-        if (!job){
+    $.each(jobs, function (idx, job) {
+        if (!job) {
             return;
         }
 
-        if (job.host_id === node_id){
+        if (job.host_id === node_id) {
             jobs_to_delete.push(idx);
         }
     });
 
-    $.each(jobs_to_delete, function (idx, val){
+    $.each(jobs_to_delete, function (idx, val) {
         jobs.splice(val, 1);
     });
-}
-
-const DeleteNode = function(node_id) {
+};
 
+const DeleteNode = function (node_id) {
     // Find node in nodes
-    let n = nodes.find(n => n.data.id === node_id);
+    let n = nodes.find((n) => n.data.id === node_id);
 
     if (!n) {
         return;
@@ -590,25 +575,23 @@ const DeleteNode = function(node_id) {
     let edges_to_delete = [];
 
     // Find all edges that connected to the deleted node
-    $.each(edges , function(idx, edge) {
-
-        if (!edge){
+    $.each(edges, function (idx, edge) {
+        if (!edge) {
             return;
         }
 
         // Find the edge
-        if (edge.data.source === node_id)
-        {
+        if (edge.data.source === node_id) {
             // Find the node on the other side
-            let t = nodes.find(t => t.data.id === edge.data.target);
+            let t = nodes.find((t) => t.data.id === edge.data.target);
 
-            if (!t){
+            if (!t) {
                 console.log("We have an edge without target node");
                 return;
             }
 
             // Iterate interface and delete one
-            let new_iface = t.interface.filter(function( iface ) {
+            let new_iface = t.interface.filter(function (iface) {
                 return iface.connect !== edge.data.id;
             });
 
@@ -617,18 +600,17 @@ const DeleteNode = function(node_id) {
             return;
         }
 
-        if (edge.data.target === node_id)
-        {
+        if (edge.data.target === node_id) {
             // Find the node on the other side
-            let t = nodes.find(t => t.data.id === edge.data.source);
+            let t = nodes.find((t) => t.data.id === edge.data.source);
 
-            if (!t){
+            if (!t) {
                 console.log("We have an edge without target node");
                 return;
             }
 
             // Iterate interface and delete one
-            let new_iface = t.interface.filter(function( iface ) {
+            let new_iface = t.interface.filter(function (iface) {
                 return iface.connect !== edge.data.id;
             });
 
@@ -636,39 +618,37 @@ const DeleteNode = function(node_id) {
             edges_to_delete.unshift(idx);
             return;
         }
-
     });
 
-    $.each(edges_to_delete, function (idx, val){
+    $.each(edges_to_delete, function (idx, val) {
         edges.splice(val, 1);
     });
 
     // Delete the node
-    let node_index = nodes.findIndex(prop => prop.data.id === node_id);
-    nodes.splice(node_index,1);
-}
+    let node_index = nodes.findIndex((prop) => prop.data.id === node_id);
+    nodes.splice(node_index, 1);
+};
 
 const DeleteEdge = function (edge_id) {
+    let ed = edges.find((ed) => ed.data.id === edge_id);
 
-    let ed = edges.find(ed => ed.data.id === edge_id);
-
-    if (!ed){
+    if (!ed) {
         return;
     }
 
     let connected_nodes = [ed.data.source, ed.data.target];
     let iterator = connected_nodes.values();
 
-    for (let node_id of iterator){
-        let t = nodes.find(t => t.data.id === node_id);
+    for (let node_id of iterator) {
+        let t = nodes.find((t) => t.data.id === node_id);
 
-        if (!t){
+        if (!t) {
             console.log("We have an edge without target node");
             continue;
         }
 
         // Iterate interface and delete one
-        let edge_node_iface = t.interface.filter(function( iface ) {
+        let edge_node_iface = t.interface.filter(function (iface) {
             return iface.connect !== edge_id;
         });
 
@@ -676,223 +656,217 @@ const DeleteEdge = function (edge_id) {
     }
 
     // Delete the edeg
-    let edge_index = edges.findIndex(prop => prop.data.id === edge_id);
-    edges.splice(edge_index,1);
+    let edge_index = edges.findIndex((prop) => prop.data.id === edge_id);
+    edges.splice(edge_index, 1);
     return;
-}
+};
 
-const PostNodes = function(){
+const PostNodes = function () {
     $.ajax({
-        type: 'POST',
-        url: '/post_network_nodes?guid=' + network_guid,
+        type: "POST",
+        url: "/post_network_nodes?guid=" + network_guid,
         data: JSON.stringify(nodes),
-        success: function(data) {},
-        error: function(err) {console.log('Cannot post nodes to server')},
+        success: function (data) { },
+        error: function (err) {
+            console.log("Cannot post nodes to server");
+        },
         contentType: "application/json",
-        dataType: 'json'
+        dataType: "json",
     });
-}
-
-const MoveNodes = function(){
+};
 
+const MoveNodes = function () {
     $.ajax({
-        type: 'POST',
-        url: '/move_network_nodes?guid=' + network_guid,
+        type: "POST",
+        url: "/move_network_nodes?guid=" + network_guid,
         data: JSON.stringify(nodes),
-        success: function(data) {},
-        error: function(err) {console.log('Cannot post nodes to server')},
+        success: function (data) { },
+        error: function (err) {
+            console.log("Cannot post nodes to server");
+        },
         contentType: "application/json",
-        dataType: 'json'
+        dataType: "json",
     });
-}
+};
 
-const prepareStylesheet = function() {
-    const getColor = function(ele) {
+const prepareStylesheet = function () {
+    const getColor = function (ele) {
         if (ele.group() === "edges") {
-            const loss = ele.data('loss_percentage') || 0;
-            if (loss > 0)
-                return '#FF8C00';
+            const loss = ele.data("loss_percentage") || 0;
+            if (loss > 0) return "#FF8C00";
         }
-        return ele.data('color') || '#9FBFE5';
+        return ele.data("color") || "#9FBFE5";
     };
-    const getEdgeLabel = function(ele) {
-      return ele.data('label') || '';
+    const getEdgeLabel = function (ele) {
+        return ele.data("label") || "";
     };
-    const getLineStyle = function(ele) {
-      return ele.data('line') || 'solid';
+    const getLineStyle = function (ele) {
+        return ele.data("line") || "solid";
     };
-    const getCurveStyle = function(ele) {
-      return ele.data('style') || 'bezier';
+    const getCurveStyle = function (ele) {
+        return ele.data("style") || "bezier";
     };
-    const getTextDirection = function(ele) {
-      return ele.data('direction') || 'autorotate';
+    const getTextDirection = function (ele) {
+        return ele.data("direction") || "autorotate";
     };
 
-    const getNodeLabel = function(ele) {
-
-        let label = ele.data('label') || '';
-        let n = nodes.find(n => n.data.id === ele.data('id'));
+    const getNodeLabel = function (ele) {
+        let label = ele.data("label") || "";
+        let n = nodes.find((n) => n.data.id === ele.data("id"));
 
-        if (!n){
+        if (!n) {
             return label;
         }
 
         $.each(n.interface, function (i) {
-
             let ip_addr = n.interface[i].ip;
             let netmask = n.interface[i].netmask;
 
-            if (!ip_addr || !netmask){
+            if (!ip_addr || !netmask) {
                 return;
             }
 
-            label = label + '\n' + ip_addr + "/" + netmask;
-        }
-        );
+            label = label + "\n" + ip_addr + "/" + netmask;
+        });
 
-        if (n.config.default_gw)
-        {
-            label = label + '\n' + 'gw:' + n.config.default_gw;
+        if (n.config.default_gw) {
+            label = label + "\n" + "gw:" + n.config.default_gw;
         }
 
         $.each(jobs, function (i) {
             let j = jobs[i];
 
-            if (j.host_id === n.data.id){
-                label = label + '\n' + '(' + j.print_cmd + ')';
+            if (j.host_id === n.data.id) {
+                label = label + "\n" + "(" + j.print_cmd + ")";
             }
-
         });
 
         return label;
     };
 
-    let sheet = cytoscape.stylesheet()
-        .selector('node')
+    let sheet = cytoscape
+        .stylesheet()
+        .selector("node")
         .css({
-          'height': 30,
-          'width': 30,
-          'background-fit': 'cover',
-          'border-color': '#000',
-          'border-width': 0,
-          'content': getNodeLabel,
-          'text-valign': 'top',
-          'text-align': 'center',
-          'font-size': '8px',
-          'text-wrap': 'wrap'
+            height: 30,
+            width: 30,
+            "background-fit": "cover",
+            "border-color": "#000",
+            "border-width": 0,
+            content: getNodeLabel,
+            "text-valign": "top",
+            "text-align": "center",
+            "font-size": "8px",
+            "text-wrap": "wrap",
         })
-        .selector('edge')
+        .selector("edge")
         .css({
-          'width': 2,
-          'target-arrow-shape': 'none',
-          'line-color': getColor,
-          'target-arrow-color': getColor,
-          'curve-style': getCurveStyle,
-          'label': getEdgeLabel,
-          'line-style': getLineStyle,
-          'color': '#000',
-          'text-outline-color': '#FFF',
-          'text-outline-width': 1,
-          'edge-text-rotation': getTextDirection,
+            width: 2,
+            "target-arrow-shape": "none",
+            "line-color": getColor,
+            "target-arrow-color": getColor,
+            "curve-style": getCurveStyle,
+            label: getEdgeLabel,
+            "line-style": getLineStyle,
+            color: "#000",
+            "text-outline-color": "#FFF",
+            "text-outline-width": 1,
+            "edge-text-rotation": getTextDirection,
         })
-        .selector('.eh-handle')
+        .selector(".eh-handle")
         .css({
-            'background-color': 'blue',
-            'width': 8,
-            'height': 8,
-            'shape': 'ellipse',
-            'overlay-opacity': 0,
-            'border-width': 4, // makes the handle easier to hit
-            'border-opacity': 0
+            "background-color": "blue",
+            width: 8,
+            height: 8,
+            shape: "ellipse",
+            "overlay-opacity": 0,
+            "border-width": 4, // makes the handle easier to hit
+            "border-opacity": 0,
         })
 
-        .selector('.eh-hover')
+        .selector(".eh-hover")
         .css({
-            'background-color': 'blue'
+            "background-color": "blue",
         })
 
-        .selector('.eh-source')
+        .selector(".eh-source")
         .css({
-            'border-width': 2,
-            'border-color': 'blue'
+            "border-width": 2,
+            "border-color": "blue",
         })
 
-        .selector('.eh-target')
+        .selector(".eh-target")
         .css({
-            'border-width': 2,
-            'border-color': 'blue'
+            "border-width": 2,
+            "border-color": "blue",
         })
 
-        .selector('.eh-preview')
+        .selector(".eh-preview")
         .css({
-            'background-color': 'blue',
-            'line-color': 'blue',
-            'target-arrow-color': 'blue',
-            'source-arrow-color': 'blue'
+            "background-color": "blue",
+            "line-color": "blue",
+            "target-arrow-color": "blue",
+            "source-arrow-color": "blue",
         })
 
-        .selector('.eh-ghost-edge')
+        .selector(".eh-ghost-edge")
         .css({
-            'background-color': 'blue',
-            'line-color': 'blue',
-            'target-arrow-color': 'blue',
-            'source-arrow-color': 'blue'
+            "background-color": "blue",
+            "line-color": "blue",
+            "target-arrow-color": "blue",
+            "source-arrow-color": "blue",
         })
 
-        .selector('node[name]')
+        .selector("node[name]")
         .css({
-            'content': 'data(name)'
+            content: "data(name)",
         })
 
         .selector('node[type="packet"]')
         .css({
-            'content': 'data(label)',
-            'text-valign': 'top',
-            'text-align': 'center',
-            'height': '5px',
-            'width': '5px',
-            'border-opacity': '0',
-            'border-width': '0px',
-            'text-wrap': 'wrap'
+            content: "data(label)",
+            "text-valign": "top",
+            "text-align": "center",
+            height: "5px",
+            width: "5px",
+            "border-opacity": "0",
+            "border-width": "0px",
+            "text-wrap": "wrap",
         })
 
-        .selector('.hidden')
+        .selector(".hidden")
         .css({
-            'display': 'none'
+            display: "none",
         })
 
-        .selector('.eh-ghost-edge.eh-preview-active')
+        .selector(".eh-ghost-edge.eh-preview-active")
         .css({
-            'opacity': 0
+            opacity: 0,
         });
 
-    const appendIconClass = function(stylesheet, cssClass) {
-      return stylesheet.selector('.' + cssClass)
-          .css({
-            'background-image': DiagramIcons[cssClass],
-            'background-opacity': 0,
-            'border-width': 0,
-            'background-clip': 'none',
-          });
+    const appendIconClass = function (stylesheet, cssClass) {
+        return stylesheet.selector("." + cssClass).css({
+            "background-image": DiagramIcons[cssClass],
+            "background-opacity": 0,
+            "border-width": 0,
+            "background-clip": "none",
+        });
     };
 
     for (const prop in DiagramIcons) {
-
-      if (Object.prototype.hasOwnProperty.call(DiagramIcons, prop)) {
-        sheet = appendIconClass(sheet, prop);
-      }
+        if (Object.prototype.hasOwnProperty.call(DiagramIcons, prop)) {
+            sheet = appendIconClass(sheet, prop);
+        }
     }
 
     return sheet;
-  };
-
-const DrawGraph = function() {
+};
 
+const DrawGraph = function () {
     // Do we already have one?
     let cy = undefined;
 
-    if (global_cy)
-    {
+    if (global_cy) {
         cy = global_cy;
 
         var collection = cy.elements();
@@ -911,7 +885,7 @@ const DrawGraph = function() {
         autounselectify: true,
         style: prepareStylesheet(),
         elements: [],
-        layout: 'preset',
+        layout: "preset",
         zoom: network_zoom,
         pan: { x: network_pan_x, y: network_pan_y },
         fit: true,
@@ -921,14 +895,12 @@ const DrawGraph = function() {
 
     // the default values of each option are outlined below:
     let defaults = {
-        canConnect: function( sourceNode, targetNode ){
-
+        canConnect: function (sourceNode, targetNode) {
             // whether an edge can be created between source and target
-        return !sourceNode.same(targetNode); // e.g. disallow loops
+            return !sourceNode.same(targetNode); // e.g. disallow loops
         },
 
-        edgeParams: function( sourceNode, targetNode ){
-
+        edgeParams: function (sourceNode, targetNode) {
             // for edges between the specified source and target
             // return element object to be passed to cy.add() for edge
             return {};
@@ -939,7 +911,7 @@ const DrawGraph = function() {
         snapThreshold: 50, // the target node must be less than or equal to this many pixels away from the cursor/finger
         snapFrequency: 15, // the number of times per second (Hz) that snap checks done (lower is less expensive)
         noEdgeEventsInDraw: true, // set events:no to edges during draws, prevents mouseouts on compounds
-        disableBrowserGestures: true // during an edge drawing gesture, disable browser gestures such as two-finger trackpad swipe and pinch-to-zoom
+        disableBrowserGestures: true, // during an edge drawing gesture, disable browser gestures such as two-finger trackpad swipe and pinch-to-zoom
     };
 
     global_eh = cy.edgehandles(defaults);
@@ -951,9 +923,8 @@ const DrawGraph = function() {
     cy.add(edges);
 
     // Changing zoom
-    cy.on('zoom', function(evt){
-
-        if (NetworkUpdateTimeoutId >= 0){
+    cy.on("zoom", function (evt) {
+        if (NetworkUpdateTimeoutId >= 0) {
             clearTimeout(NetworkUpdateTimeoutId);
             NetworkUpdateTimeoutId = -1;
         }
@@ -962,9 +933,8 @@ const DrawGraph = function() {
     });
 
     // Changing the pan
-    cy.on('pan', function(evt){
-
-        if (NetworkUpdateTimeoutId >= 0){
+    cy.on("pan", function (evt) {
+        if (NetworkUpdateTimeoutId >= 0) {
             clearTimeout(NetworkUpdateTimeoutId);
             NetworkUpdateTimeoutId = -1;
         }
@@ -973,10 +943,9 @@ const DrawGraph = function() {
     });
 
     // Looking for a position changing
-    cy.on('dragfree', 'node', function(evt){
-
+    cy.on("dragfree", "node", function (evt) {
         //let node_id = evt.target.id();
-        let n = nodes.find(n => n.data.id === this.id());
+        let n = nodes.find((n) => n.data.id === this.id());
 
         if (!n) {
             return;
@@ -990,20 +959,19 @@ const DrawGraph = function() {
     });
 
     // Click on object
-    cy.on('click', function (evt) {
-
+    cy.on("click", function (evt) {
         let evtTarget = evt.target;
 
         // Is this cy ?
         if (evtTarget === cy) {
-            ClearConfigForm('');
+            ClearConfigForm("");
             selecteed_node_id = 0;
             selected_edge_id = 0;
             return;
         }
 
         // Is this edge ?
-        if (evtTarget.group() === 'edges'){
+        if (evtTarget.group() === "edges") {
             selected_edge_id = evtTarget.data().id;
             ShowEdgeConfig(selected_edge_id);
             selecteed_node_id = 0;
@@ -1012,7 +980,7 @@ const DrawGraph = function() {
 
         // Maybe host ?
         var target_id = evt.target.id();
-        let n = nodes.find(n => n.data.id === target_id);
+        let n = nodes.find((n) => n.data.id === target_id);
 
         if (!n) {
             return;
@@ -1021,21 +989,21 @@ const DrawGraph = function() {
         selecteed_node_id = n.data.id;
         selected_edge_id = 0;
 
-        if (n.config.type === 'host'){
+        if (n.config.type === "host") {
             ShowHostConfig(n);
-        } else if (n.config.type === 'l1_hub'){
+        } else if (n.config.type === "l1_hub") {
             ShowHubConfig(n);
-        } else if (n.config.type === 'l2_switch'){
+        } else if (n.config.type === "l2_switch") {
             ShowSwitchConfig(n);
-        } else if (n.config.type === 'router'){
+        } else if (n.config.type === "router") {
             ShowRouterConfig(n);
-        } else if (n.config.type === 'server'){
+        } else if (n.config.type === "server") {
             ShowServerConfig(n);
         }
     });
 
     // Add edge to the edges[] and then save it to the server.
-    cy.on('ehcomplete', (event, sourceNode, targetNode, addedEdge) => {
+    cy.on("ehcomplete", (event, sourceNode, targetNode, addedEdge) => {
         AddEdge(sourceNode._private.data.id, targetNode._private.data.id);
         PostNodesEdges();
         TakeGraphPictureAndUpdate();
@@ -1043,21 +1011,19 @@ const DrawGraph = function() {
         SetNetworkPlayerState(-1);
     });
 
-    $(document).on('keyup', function(e){
-
+    $(document).on("keyup", function (e) {
         if (e.keyCode == 46 && selecteed_node_id) {
-
             // Save the network state.
             SaveNetworkObject();
 
             DeleteNode(selecteed_node_id);
             DeleteJob(selecteed_node_id);
 
-            ClearConfigForm('');
+            ClearConfigForm("");
             selecteed_node_id = 0;
             selected_edge_id = 0;
 
-            PostNodesEdges();               // Update network on server
+            PostNodesEdges(); // Update network on server
             cy.elements().remove();
             cy.add(nodes);
             cy.add(edges);
@@ -1067,18 +1033,17 @@ const DrawGraph = function() {
             // Reset network state
             SetNetworkPlayerState(-1);
         }
-        if (e.keyCode ==  46 && selected_edge_id) {
-
+        if (e.keyCode == 46 && selected_edge_id) {
             // Save the network state.
             SaveNetworkObject();
 
             DeleteEdge(selected_edge_id);
 
-            ClearConfigForm('');
+            ClearConfigForm("");
             selecteed_node_id = 0;
             selected_edge_id = 0;
 
-            PostNodesEdges();               // Update network on server
+            PostNodesEdges(); // Update network on server
             cy.elements().remove();
             cy.add(nodes);
             cy.add(edges);
@@ -1089,15 +1054,14 @@ const DrawGraph = function() {
             SetNetworkPlayerState(-1);
         }
 
-        if (e.keyCode == 90 && e.ctrlKey){
-
-            ClearConfigForm('');
+        if (e.keyCode == 90 && e.ctrlKey) {
+            ClearConfigForm("");
             selecteed_node_id = 0;
             selected_edge_id = 0;
 
             RestoreNetworkObject();
 
-            PostNodesEdges();               // Update network on server
+            PostNodesEdges(); // Update network on server
             cy.elements().remove();
             cy.add(nodes);
             cy.add(edges);
@@ -1107,23 +1071,20 @@ const DrawGraph = function() {
             // Reset network state
             SetNetworkPlayerState(-1);
         }
-
     });
-}
-
-const DrawGraphStatic = function(nodes, edges, shared=0) {
+};
 
+const DrawGraphStatic = function (nodes, edges, shared = 0) {
     // Do we already have one?
     let cy = undefined;
 
     let network_scheme_id = "network_scheme";
 
-    if (shared){
+    if (shared) {
         network_scheme_id = "network_scheme_shared";
     }
 
-    if (global_cy)
-    {
+    if (global_cy) {
         cy = global_cy;
         cy.elements().remove();
     } else {
@@ -1133,17 +1094,17 @@ const DrawGraphStatic = function(nodes, edges, shared=0) {
             autounselectify: false,
             style: prepareStylesheet(),
             elements: [],
-            layout: 'preset',
+            layout: "preset",
             zoom: network_zoom,
             pan: { x: network_pan_x, y: network_pan_y },
             fit: true,
         });
 
-         global_cy = cy;
+        global_cy = cy;
     }
 
     // Turn off edges creation.
-    if (global_eh){
+    if (global_eh) {
         global_eh.disable();
     }
 
@@ -1152,15 +1113,13 @@ const DrawGraphStatic = function(nodes, edges, shared=0) {
     cy.add(edges);
     cy.nodes().ungrabify();
     return;
-}
-
-const DrawSharedGraph = function(nodes, edges) {
+};
 
+const DrawSharedGraph = function (nodes, edges) {
     // Do we already have one?
     let cy = undefined;
 
-    if (global_cy)
-    {
+    if (global_cy) {
         cy = global_cy;
         cy.elements().remove();
     } else {
@@ -1170,7 +1129,7 @@ const DrawSharedGraph = function(nodes, edges) {
             autounselectify: true,
             style: prepareStylesheet(),
             elements: [],
-            layout: 'preset',
+            layout: "preset",
             zoom: network_zoom,
             pan: { x: network_pan_x, y: network_pan_y },
             fit: true,
@@ -1188,18 +1147,17 @@ const DrawSharedGraph = function(nodes, edges) {
     cy.add(edges);
 
     // Click on object
-    cy.on('click', function (evt) {
-
+    cy.on("click", function (evt) {
         let evtTarget = evt.target;
         if (evtTarget === cy) {
-            ClearConfigForm('');
+            ClearConfigForm("");
             selecteed_node_id = 0;
             selected_edge_id = 0;
             return;
         }
 
         // Is this edge ?
-        if (evtTarget.group() === 'edges'){
+        if (evtTarget.group() === "edges") {
             selected_edge_id = evtTarget.data().id;
             ShowEdgeConfig(selected_edge_id, 1);
             selecteed_node_id = 0;
@@ -1207,7 +1165,7 @@ const DrawSharedGraph = function(nodes, edges) {
         }
 
         var target_id = evt.target.id();
-        let n = nodes.find(n => n.data.id === target_id);
+        let n = nodes.find((n) => n.data.id === target_id);
 
         if (!n) {
             return;
@@ -1216,35 +1174,39 @@ const DrawSharedGraph = function(nodes, edges) {
         selecteed_node_id = n.data.id;
         selected_edge_id = 0;
 
-        if (n.config.type === 'host'){
-            ShowHostConfig(n, shared=1);
-        } else if (n.config.type === 'l1_hub'){
-            ShowHubConfig(n, shared=1);
-        } else if (n.config.type === 'l2_switch'){
-            ShowSwitchConfig(n, shared=1);
-        } else if (n.config.type === 'router'){
-            ShowRouterConfig(n, shared=1);
-        } else if (n.config.type === 'server'){
-            ShowServerConfig(n, shared=1);
+        if (n.config.type === "host") {
+            ShowHostConfig(n, (shared = 1));
+        } else if (n.config.type === "l1_hub") {
+            ShowHubConfig(n, (shared = 1));
+        } else if (n.config.type === "l2_switch") {
+            ShowSwitchConfig(n, (shared = 1));
+        } else if (n.config.type === "router") {
+            ShowRouterConfig(n, (shared = 1));
+        } else if (n.config.type === "server") {
+            ShowServerConfig(n, (shared = 1));
         }
     });
-}
-
-const DrawIndexGraphStatic = function(nodes, edges, container_id, graph_network_zoom,
-                                    graph_network_pan_x, graph_network_pan_y)
-{
+};
 
+const DrawIndexGraphStatic = function (
+    nodes,
+    edges,
+    container_id,
+    graph_network_zoom,
+    graph_network_pan_x,
+    graph_network_pan_y
+) {
     let index_cy = cytoscape({
         container: document.getElementById(container_id),
         boxSelectionEnabled: true,
         autounselectify: false,
         style: prepareStylesheet(),
         elements: [],
-        layout: 'preset',
+        layout: "preset",
         zoom: graph_network_zoom,
-            pan: { x: graph_network_pan_x, y: graph_network_pan_y },
-            fit: true,
-        });
+        pan: { x: graph_network_pan_x, y: graph_network_pan_y },
+        fit: true,
+    });
 
     index_cy.autounselectify(false);
 
@@ -1254,131 +1216,129 @@ const DrawIndexGraphStatic = function(nodes, edges, container_id, graph_network_
 
     index_cy.nodes().ungrabify();
     return index_cy;
-}
+};
 
 // Check whether simulation is over and we can run packets
-const CheckSimulation = function (simulation_id)
-{
+const CheckSimulation = function (simulation_id) {
     $.ajax({
-        type: 'GET',
-        url: '/check_simulation?simulation_id=' + simulation_id + '&network_guid=' + network_guid,
-        data: '',
-        success: function(data, textStatus, xhr) {
-
+        type: "GET",
+        url:
+            "/check_simulation?simulation_id=" +
+            simulation_id +
+            "&network_guid=" +
+            network_guid,
+        data: "",
+        success: function (data, textStatus, xhr) {
             // If we got 210 (processing) wait 2 sec and call themself again
-            if (xhr.status === 210)
-            {
+            if (xhr.status === 210) {
                 setTimeout(CheckSimulation, 2000, simulation_id);
             }
 
             // Simulation is ended up and we can grab the packets
-            if (xhr.status === 200)
-            {
+            if (xhr.status === 200) {
                 packets = JSON.parse(data.packets);
                 pcaps = data.pcaps;
-                SetNetworkPlayerState(0);
 
-                const answerButton = document.querySelector('button[name="answerQuestion"]');
+                // Set filters
+                packets_not_filtered = null;
+                SetPacketFilter();
+
+                const answerButton = document.querySelector(
+                    'button[name="answerQuestion"]'
+                );
                 if (answerButton) {
                     answerButton.disabled = false;
                 }
             }
         },
-        error: function(xhr) {
-            console.log('Cannot check simulation id = ' + simulation_id);
+        error: function (xhr) {
+            console.log("Cannot check simulation id = " + simulation_id);
             SetNetworkPlayerState(-1);
         },
         contentType: "application/json",
-        dataType: 'json'
+        dataType: "json",
     });
-}
+};
 
 // Update edge configuration
 const UpdateEdgeConfiguration = (data) => {
     SetNetworkPlayerState(-1);
 
     return $.ajax({
-        type: 'POST',
-        url: '/edge/save_config',
+        type: "POST",
+        url: "/edge/save_config",
         data: data,
-        complete: function() {
+        complete: function () {
             DrawGraph();
-            $('#config_edge_main_form_submit_button').html('Сохранить');
+            $("#config_edge_main_form_submit_button").html("Сохранить");
         },
-        error: function(xhr) {
-            console.log('Не удалось обновить конфигурацию ребра');
+        error: function (xhr) {
+            console.log("Не удалось обновить конфигурацию ребра");
             console.log(xhr);
         },
-        dataType: 'json'
+        dataType: "json",
     });
 };
 
-
-const InsertWaitingTime = function ()
-{
+const InsertWaitingTime = function () {
     // Get last emulation task time
     // and send request to get count of emulating networks before this time
     $.ajax({
-        type: 'GET',
-        url: 'emulation_queue/time',
-        data: '',
-        success: function(data) {
+        type: "GET",
+        url: "emulation_queue/time",
+        data: "",
+        success: function (data) {
             // Run helper function with time param
-            InsertWaitingTimeHelper(data.time)
+            InsertWaitingTimeHelper(data.time);
         },
-        error: function(err) {
+        error: function (err) {
             console.error("Failed to fetch queue time:", err);
         },
         contentType: "application/json",
-        dataType: 'json'
+        dataType: "json",
     });
-}
+};
 
-const InsertWaitingTimeHelper = function(time_filter) {
+const InsertWaitingTimeHelper = function (time_filter) {
     // Insert field with queue size
     $.ajax({
-        type: 'GET',
-        url: 'emulation_queue/size?time-filter=' + time_filter.toString(),
-        data: '',
-        success: function(data) {
+        type: "GET",
+        url: "emulation_queue/size?time-filter=" + time_filter.toString(),
+        data: "",
+        success: function (data) {
             const queue_size = parseInt(data.size);
 
-            if ($('#NetworkPlayerLabel').text().startsWith("Шаг:")) {
+            if ($("#NetworkPlayerLabel").text().startsWith("Шаг:")) {
                 return;
             } else if (queue_size <= 1) {
-                $('#NetworkPlayerLabel').text("Ожидание 10-15 сек.");
+                $("#NetworkPlayerLabel").text("Ожидание 10-15 сек.");
             } else {
-                $('#NetworkPlayerLabel').text(`Место в очереди ${queue_size}`);
+                $("#NetworkPlayerLabel").text(`Место в очереди ${queue_size}`);
 
                 // Update waiting time
                 setTimeout(() => InsertWaitingTimeHelper(time_filter), 500);
             }
-
         },
-        error: function(err) {
+        error: function (err) {
             console.error("Failed to fetch queue size:", err);
         },
         contentType: "application/json",
-        dataType: 'json'
+        dataType: "json",
     });
-}
+};
 
 // Update host configuration
-const UpdateHostConfiguration = function (data, host_id)
-{
+const UpdateHostConfiguration = function (data, host_id) {
     // Reset network player
     SetNetworkPlayerState(-1);
 
     $.ajax({
-        type: 'POST',
-        url: '/host/save_config',
+        type: "POST",
+        url: "/host/save_config",
         data: data,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
-                if (!data.warning){
-
+        success: function (data, textStatus, xhr) {
+            if (xhr.status === 200) {
+                if (!data.warning) {
                     // Update nodes
                     nodes = data.nodes;
 
@@ -1390,53 +1350,50 @@ const UpdateHostConfiguration = function (data, host_id)
                 }
 
                 // Ok, let's try to update host config form
-                let n = nodes.find(n => n.data.id === host_id);
+                let n = nodes.find((n) => n.data.id === host_id);
 
                 if (!n) {
-                    ClearConfigForm('Нет такого хоста');
+                    ClearConfigForm("Нет такого хоста");
                     return;
                 }
 
-                if (n.config.type === 'host'){
+                if (n.config.type === "host") {
                     ShowHostConfig(n);
                 } else {
-                    ClearConfigForm('Узел есть, но это не хост');
+                    ClearConfigForm("Узел есть, но это не хост");
                     return;
                 }
 
-                if (data.warning){
+                if (data.warning) {
                     HostWarningMsg(data.warning);
                 }
             }
         },
-        error: function(xhr) {
-            console.log('Не удалось обновить конфигурацию хоста');
+        error: function (xhr) {
+            console.log("Не удалось обновить конфигурацию хоста");
             console.log(xhr);
         },
-        dataType: 'json'
+        dataType: "json",
     });
-}
+};
 
 // Delete job from host
-const DeleteJobFromHost = function (host_id, job_id, network_guid)
-{
+const DeleteJobFromHost = function (host_id, job_id, network_guid) {
     // Reset network player
     SetNetworkPlayerState(-1);
 
     let data = {
-      id: job_id,
-      guid: network_guid,
+        id: job_id,
+        guid: network_guid,
     };
 
     $.ajax({
-        type: 'POST',
-        url: '/host/delete_job',
+        type: "POST",
+        url: "/host/delete_job",
         data: data,
         encode: true,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
+        success: function (data, textStatus, xhr) {
+            if (xhr.status === 200) {
                 // Update jobs
                 jobs = data.jobs;
 
@@ -1444,49 +1401,45 @@ const DeleteJobFromHost = function (host_id, job_id, network_guid)
                 DrawGraph();
 
                 // Ok, let's try to update host config form
-                let n = nodes.find(n => n.data.id === host_id);
+                let n = nodes.find((n) => n.data.id === host_id);
 
                 if (!n) {
-                    ClearConfigForm('Нет такого хоста');
+                    ClearConfigForm("Нет такого хоста");
                     return;
                 }
 
-                if (n.config.type === 'host'){
+                if (n.config.type === "host") {
                     ShowHostConfig(n);
                 } else {
-                    ClearConfigForm('Узел есть, но это не хост');
+                    ClearConfigForm("Узел есть, но это не хост");
                 }
-
             }
         },
-        error: function(xhr) {
-            console.log('Не удалось удалить команду');
+        error: function (xhr) {
+            console.log("Не удалось удалить команду");
             console.log(xhr);
         },
-        dataType: 'json'
+        dataType: "json",
     });
-}
+};
 
 // Delete job from router
-const DeleteJobFromRouter = function (router_id, job_id, network_guid)
-{
+const DeleteJobFromRouter = function (router_id, job_id, network_guid) {
     // Reset network player
     SetNetworkPlayerState(-1);
 
     let data = {
-      id: job_id,
-      guid: network_guid,
+        id: job_id,
+        guid: network_guid,
     };
 
     $.ajax({
-        type: 'POST',
-        url: '/host/delete_job',
+        type: "POST",
+        url: "/host/delete_job",
         data: data,
         encode: true,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
+        success: function (data, textStatus, xhr) {
+            if (xhr.status === 200) {
                 // Update jobs
                 jobs = data.jobs;
 
@@ -1494,48 +1447,45 @@ const DeleteJobFromRouter = function (router_id, job_id, network_guid)
                 DrawGraph();
 
                 // Ok, let's try to update host config form
-                let n = nodes.find(n => n.data.id === router_id);
+                let n = nodes.find((n) => n.data.id === router_id);
 
                 if (!n) {
-                    ClearConfigForm('Нет такого хоста');
+                    ClearConfigForm("Нет такого хоста");
                     return;
                 }
 
-                if (n.config.type === 'router'){
+                if (n.config.type === "router") {
                     ShowRouterConfig(n);
                 } else {
-                    ClearConfigForm('Узел есть, но это не раутер');
+                    ClearConfigForm("Узел есть, но это не раутер");
                 }
             }
         },
-        error: function(xhr) {
-            console.log('Не удалось удалить команду');
+        error: function (xhr) {
+            console.log("Не удалось удалить команду");
             console.log(xhr);
         },
-        dataType: 'json'
+        dataType: "json",
     });
-}
+};
 
 // Delete job from server
-const DeleteJobFromServer = function (server_id, job_id, network_guid)
-{
+const DeleteJobFromServer = function (server_id, job_id, network_guid) {
     // Reset network player
     SetNetworkPlayerState(-1);
 
     let data = {
-      id: job_id,
-      guid: network_guid,
+        id: job_id,
+        guid: network_guid,
     };
 
     $.ajax({
-        type: 'POST',
-        url: '/host/delete_job',
+        type: "POST",
+        url: "/host/delete_job",
         data: data,
         encode: true,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
+        success: function (data, textStatus, xhr) {
+            if (xhr.status === 200) {
                 // Update jobs
                 jobs = data.jobs;
 
@@ -1543,51 +1493,46 @@ const DeleteJobFromServer = function (server_id, job_id, network_guid)
                 DrawGraph();
 
                 // Ok, let's try to update host config form
-                let n = nodes.find(n => n.data.id === server_id);
+                let n = nodes.find((n) => n.data.id === server_id);
 
                 if (!n) {
-                    ClearConfigForm('Нет такого хоста');
+                    ClearConfigForm("Нет такого хоста");
                     return;
                 }
 
-                if (n.config.type === 'server'){
+                if (n.config.type === "server") {
                     ShowServerConfig(n);
                 } else {
-                    ClearConfigForm('Узел есть, но это не сервер');
+                    ClearConfigForm("Узел есть, но это не сервер");
                 }
             }
         },
-        error: function(xhr) {
-            console.log('Не удалось удалить команду');
+        error: function (xhr) {
+            console.log("Не удалось удалить команду");
             console.log(xhr);
         },
-        dataType: 'json'
+        dataType: "json",
     });
-}
+};
 
 // Update router configuration
-const UpdateRouterConfiguration = function (data, router_id)
-{
+const UpdateRouterConfiguration = function (data, router_id) {
     // Reset network player
     SetNetworkPlayerState(-1);
 
     $.ajax({
-        type: 'POST',
-        url: '/host/router_save_config',
+        type: "POST",
+        url: "/host/router_save_config",
         data: data,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
+        success: function (data, textStatus, xhr) {
+            if (xhr.status === 200) {
                 // Update nodes
-                if (data.nodes)
-                {
+                if (data.nodes) {
                     nodes = data.nodes;
                 }
 
                 // Update jobs
-                if (data.jobs)
-                {
+                if (data.jobs) {
                     jobs = data.jobs;
                 }
 
@@ -1595,57 +1540,50 @@ const UpdateRouterConfiguration = function (data, router_id)
                 DrawGraph();
 
                 // Ok, let's try to update router config form
-                let n = nodes.find(n => n.data.id === router_id);
+                let n = nodes.find((n) => n.data.id === router_id);
 
                 if (!n) {
-                    ClearConfigForm('Нет такого раутера');
+                    ClearConfigForm("Нет такого раутера");
                     return;
                 }
 
-                if (n.config.type === 'router'){
+                if (n.config.type === "router") {
                     ShowRouterConfig(n);
                 } else {
-                    ClearConfigForm('Узел есть, но это не раутер');
+                    ClearConfigForm("Узел есть, но это не раутер");
                     return;
                 }
 
-                if (data.warning)
-                {
+                if (data.warning) {
                     HostWarningMsg(data.warning);
                 }
             }
-
         },
-        error: function(xhr) {
-            console.log('Не удалось обновить конфигурацию хоста');
+        error: function (xhr) {
+            console.log("Не удалось обновить конфигурацию хоста");
             console.log(xhr);
         },
-        dataType: 'json'
+        dataType: "json",
     });
-}
+};
 
 // Update server configuration
-const UpdateServerConfiguration = function (data, router_id)
-{
+const UpdateServerConfiguration = function (data, router_id) {
     // Reset network player
     SetNetworkPlayerState(-1);
 
     $.ajax({
-        type: 'POST',
-        url: '/host/server_save_config',
+        type: "POST",
+        url: "/host/server_save_config",
         data: data,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
-
-                if (!data.warning){
-
-                    if (data.nodes){
+        success: function (data, textStatus, xhr) {
+            if (xhr.status === 200) {
+                if (!data.warning) {
+                    if (data.nodes) {
                         nodes = data.nodes;
                     }
 
-                    if (data.jobs){
+                    if (data.jobs) {
                         jobs = data.jobs;
                     }
 
@@ -1654,46 +1592,41 @@ const UpdateServerConfiguration = function (data, router_id)
                 }
 
                 // Ok, let's try to update router config form
-                let n = nodes.find(n => n.data.id === router_id);
+                let n = nodes.find((n) => n.data.id === router_id);
 
                 if (!n) {
-                    ClearConfigForm('Нет такого сервера');
+                    ClearConfigForm("Нет такого сервера");
                     return;
                 }
 
-                if (n.config.type === 'server'){
+                if (n.config.type === "server") {
                     ShowServerConfig(n);
                 } else {
-                    ClearConfigForm('Узел есть, но это не сервер');
+                    ClearConfigForm("Узел есть, но это не сервер");
                     return;
                 }
 
-                if (data.warning)
-                {
+                if (data.warning) {
                     ServerWarningMsg(data.warning);
                 }
             }
-
         },
-        error: function(xhr) {
-            console.log('Не удалось обновить конфигурацию сервера');
+        error: function (xhr) {
+            console.log("Не удалось обновить конфигурацию сервера");
             console.log(xhr);
         },
-        dataType: 'json'
+        dataType: "json",
     });
-}
+};
 
 // Update hub configuration
-const UpdateHubConfiguration = function (data, hub_id)
-{
+const UpdateHubConfiguration = function (data, hub_id) {
     $.ajax({
-        type: 'POST',
-        url: '/host/hub_save_config',
+        type: "POST",
+        url: "/host/hub_save_config",
         data: data,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
+        success: function (data, textStatus, xhr) {
+            if (xhr.status === 200) {
                 // Update nodes
                 nodes = data.nodes;
 
@@ -1704,42 +1637,39 @@ const UpdateHubConfiguration = function (data, hub_id)
                 DrawGraph();
 
                 // Ok, let's try to update host config form
-                let n = nodes.find(n => n.data.id === hub_id);
+                let n = nodes.find((n) => n.data.id === hub_id);
 
                 if (!n) {
-                    ClearConfigForm('Нет такого узла');
+                    ClearConfigForm("Нет такого узла");
                     return;
                 }
 
-                if (n.config.type === 'l1_hub'){
+                if (n.config.type === "l1_hub") {
                     ShowHubConfig(n);
                 } else {
-                    ClearConfigForm('Нет такого хаба');
+                    ClearConfigForm("Нет такого хаба");
                 }
             }
         },
-        error: function(xhr) {
-            console.log('Cannot update host config');
+        error: function (xhr) {
+            console.log("Cannot update host config");
             console.log(xhr);
         },
-        dataType: 'json'
+        dataType: "json",
     });
-}
+};
 
 // Update Switch configuration
-const UpdateSwitchConfiguration = function (data, switch_id)
-{
+const UpdateSwitchConfiguration = function (data, switch_id) {
     // Reset network player
     SetNetworkPlayerState(-1);
 
     $.ajax({
-        type: 'POST',
-        url: '/host/switch_save_config',
+        type: "POST",
+        url: "/host/switch_save_config",
         data: data,
-        success: function(data, textStatus, xhr) {
-
-            if (xhr.status === 200)
-            {
+        success: function (data, textStatus, xhr) {
+            if (xhr.status === 200) {
                 // Update nodes
                 nodes = data.nodes;
 
@@ -1750,141 +1680,214 @@ const UpdateSwitchConfiguration = function (data, switch_id)
                 DrawGraph();
 
                 // Ok, let's try to update host config form
-                let n = nodes.find(n => n.data.id === switch_id);
+                let n = nodes.find((n) => n.data.id === switch_id);
 
                 if (!n) {
-                    ClearConfigForm('Нет такого узла');
+                    ClearConfigForm("Нет такого узла");
                     return;
                 }
 
-                if (n.config.type === 'l2_switch'){
+                if (n.config.type === "l2_switch") {
                     ShowSwitchConfig(n);
                 } else {
-                    ClearConfigForm('Нет такого свитча');
+                    ClearConfigForm("Нет такого свитча");
                 }
             }
         },
-        error: function(xhr) {
-            console.log('Cannot update host config');
+        error: function (xhr) {
+            console.log("Cannot update host config");
             console.log(xhr);
         },
-        dataType: 'json'
+        dataType: "json",
     });
-}
+};
 
-const RunSimulation = function (network_guid)
-{
+const RunSimulation = function (network_guid) {
     $.ajax({
-        type: 'POST',
-        url: '/run_simulation?guid=' + network_guid,
-        data: '',
-        success: function(data, textStatus, xhr) {
-            if (xhr.status === 201)
-            {
+        type: "POST",
+        url: "/run_simulation?guid=" + network_guid,
+        data: "",
+        success: function (data, textStatus, xhr) {
+            if (xhr.status === 201) {
                 console.log("Simulation is running!");
                 // Ok, run CheckSimulation
-                if (data.simulation_id)
-                {
+                if (data.simulation_id) {
                     CheckSimulation(data.simulation_id);
                 }
             }
         },
-        error: function(err) {
-            console.log('Cannot run simulation guid = ' + network_guid);
+        error: function (err) {
+            console.log("Cannot run simulation guid = " + network_guid);
             SetNetworkPlayerState(-1);
         },
         contentType: "application/json",
-        dataType: 'json'
+        dataType: "json",
     });
-}
+};
+
+const FilterPackets = function () {
+    if (filterState.hideARP)
+        packets = packets
+            .map((step) => step.filter((pkt) => !pkt.data.label.startsWith("ARP")))
+            .filter((step) => step.length > 0);
+
+    if (filterState.hideSTP)
+        packets = packets
+            .map((step) =>
+                step.filter(
+                    (pkt) =>
+                        !(
+                            pkt.data.label.startsWith("STP") ||
+                            pkt.data.label.startsWith("RSTP")
+                        )
+                )
+            )
+            .filter((step) => step.length > 0);
+    console.log("filterState:", filterState);
+    console.log("Packets after filters:", packets);
+};
+
+const RecoverFilterStates = function () {
+    $("#ARPFilterCheckbox").prop("checked", filterState.hideARP);
+    $("#STPFilterCheckbox").prop("checked", filterState.hideSTP);
+};
+
+const SetPacketFilter = function () {
+    console.log("Packet filter call");
+    // SetPacketFilter first call on emulated network
+    if (packets && !packets_not_filtered) {
+        packets_not_filtered = JSON.parse(JSON.stringify(packets)); // Array deep copy
+    }
+    // Numerous filter call, we grab our packets copy to filter it
+    else if (packets_not_filtered) {
+        packets = JSON.parse(JSON.stringify(packets_not_filtered));
+    }
+
+    filterState.hideARP = $("#ARPFilterCheckbox").is(":checked");
+    filterState.hideSTP = $("#STPFilterCheckbox").is(":checked");
+
+    console.log("filterState after filter call:", filterState);
+    if (packets) {
+        console.log("packets here");
+        FilterPackets();
+
+        SetNetworkPlayerState(0);
+    }
+};
 
 // 2 states:
 // Do we need emulation
 // We have a packets and ready to play packets
-const SetNetworkPlayerState = function(simultaion_id)
-{
-
+const SetNetworkPlayerState = function (simultaion_id) {
     // Reset?
-    if (simultaion_id === -1){
+    if (simultaion_id === -1) {
         packets = null;
+        packets_not_filtered = null;
         pcaps = [];
         SetNetworkPlayerState(0);
         return;
     }
 
     // If we have packets, then we're ready to run
-    if (packets)
-    {
-        $('#NetworkPlayer').empty();
-        $('#NetworkPlayer').append('<button type="button" class="btn btn-danger me-2" id="NetworkStopButton"><i class="bx bx-stop fs-xl"></i></button>');
-        $('#NetworkPlayer').append('<button type="button" class="btn btn-success" id="NetworkPlayPauseButton" onclick="if (typeof window.ym != \'undefined\'){ym(92293993,\'reachGoal\',\'PlayPauseButton\');}"><i class="bx bx-play fs-xl"></i></button>');
+    if (packets) {
+        $("#NetworkPlayer").empty();
+        $("#NetworkPlayer").append(
+            '<button type="button" class="btn btn-danger me-2" id="NetworkStopButton"><i class="bx bx-stop fs-xl"></i></button>'
+        );
+        $("#NetworkPlayer").append(
+            '<button type="button" class="btn btn-success" id="NetworkPlayPauseButton" onclick="if (typeof window.ym != \'undefined\'){ym(92293993,\'reachGoal\',\'PlayPauseButton\');}"><i class="bx bx-play fs-xl"></i></button>'
+        );
 
         // Init player
         PacketPlayer.getInstance().InitPlayer(packets);
 
         // Configure the slider
-        $('#PacketSliderInput')[0].noUiSlider.updateOptions({
+        $("#PacketSliderInput")[0].noUiSlider.updateOptions({
             start: [1],
             range: {
-                'min': 1,
-                'max': packets.length,
+                min: 1,
+                max: packets.length,
             },
             format: {
-                to: function (val){return '' + val},
-                from: function (val){return '' + val},
+                to: function (val) {
+                    return "" + val;
+                },
+                from: function (val) {
+                    return "" + val;
+                },
             },
             tooltips: false,
         });
 
         // Show Slider on
-        $('#PacketSliderInput').show();
+        $("#PacketSliderInput").show();
 
-        const pkt_count = packets.reduce((currentCount, row) => currentCount + row.length, 0);
-        $('#NetworkPlayerLabel').text(packets.length + ' ' + NumWord(packets.length, ['шаг', 'шага', 'шагов']) + ' / ' + pkt_count + ' ' + NumWord(pkt_count, ['пакет', 'пакета', 'пакетов']));
+        const pkt_count = packets.reduce(
+            (currentCount, row) => currentCount + row.length,
+            0
+        );
+        $("#NetworkPlayerLabel").text(
+            packets.length +
+            " " +
+            NumWord(packets.length, ["шаг", "шага", "шагов"]) +
+            " / " +
+            pkt_count +
+            " " +
+            NumWord(pkt_count, ["пакет", "пакета", "пакетов"])
+        );
 
-        $('#PacketSliderInput')[0].noUiSlider.on('slide', function (e) {
+        $("#PacketSliderInput")[0].noUiSlider.on("slide", function (e) {
             if (!e) return;
-            let x =  Math.round(e[0]);
-            PacketPlayer.getInstance().setAnimationTrafficStep(x-1);
+            let x = Math.round(e[0]);
+            PacketPlayer.getInstance().setAnimationTrafficStep(x - 1);
         });
 
-        $('#PacketSliderInput')[0].noUiSlider.on('update', function (e) {
+        $("#PacketSliderInput")[0].noUiSlider.on("update", function (e) {
             if (!e) return;
-            let x =  Math.round(e[0]);
-            if (packets.length === 0){
-                $('#NetworkPlayerLabel').text('0 пакетов');
+            let x = Math.round(e[0]);
+            if (packets.length === 0) {
+                $("#NetworkPlayerLabel").text("0 пакетов");
                 return;
             }
-            $('#NetworkPlayerLabel').text('Шаг: ' + x + '/' + packets.length + ' (' +  packets[x-1].length + ' ' + NumWord(packets[x-1].length, ['пакет', 'пакета', 'пакетов']) + ')');
+            $("#NetworkPlayerLabel").text(
+                "Шаг: " +
+                x +
+                "/" +
+                packets.length +
+                " (" +
+                packets[x - 1].length +
+                " " +
+                NumWord(packets[x - 1].length, ["пакет", "пакета", "пакетов"]) +
+                ")"
+            );
         });
 
         // Set click handlers
-        $('#NetworkPlayPauseButton').click(function() {
-
+        $("#NetworkPlayPauseButton").click(function () {
             // If btn-success then start to play
-            if ($(this).hasClass("btn-success")){
-                $(this).removeClass('btn-success');
-                $(this).addClass('btn-warning');
+            if ($(this).hasClass("btn-success")) {
+                $(this).removeClass("btn-success");
+                $(this).addClass("btn-warning");
 
                 $(this).empty();
                 $(this).append('<i class="bx bx-pause fs-xl"></i>');
 
                 // If not in pause. Draw a new layout and go.
-                if (!PacketPlayer.getInstance().getPlayerPause())
-                {
+                if (!PacketPlayer.getInstance().getPlayerPause()) {
                     DrawGraphStatic(nodes, edges);
                 }
 
-                PacketPlayer.getInstance().setAnimationTrafficStepCallback(function() {
-                    $('#PacketSliderInput')[0].noUiSlider.set(PacketPlayer.getInstance().getAnimationTrafficStep());
+                PacketPlayer.getInstance().setAnimationTrafficStepCallback(function () {
+                    $("#PacketSliderInput")[0].noUiSlider.set(
+                        PacketPlayer.getInstance().getAnimationTrafficStep()
+                    );
                 });
 
                 PacketPlayer.getInstance().StartPlayer(global_cy);
                 return;
             } else {
-
-                $(this).removeClass('btn-warning');
-                $(this).addClass('btn-success');
+                $(this).removeClass("btn-warning");
+                $(this).addClass("btn-success");
                 $(this).empty();
                 $(this).append('<i class="bx bx-play fs-xl"></i>');
 
@@ -1893,21 +1896,20 @@ const SetNetworkPlayerState = function(simultaion_id)
             }
         });
 
-        $('#NetworkStopButton').click(function() {
-
+        $("#NetworkStopButton").click(function () {
             PacketPlayer.getInstance().resetAnimationTrafficStepCallback();
             PacketPlayer.getInstance().StopPlayer();
 
             // Reset slider.
-            $('#PacketSliderInput')[0].noUiSlider.set(0);
+            $("#PacketSliderInput")[0].noUiSlider.set(0);
 
             DrawGraph(nodes, edges);
 
-            $('#NetworkPlayPauseButton').removeClass('btn-success');
-            $('#NetworkPlayPauseButton').removeClass('btn-warning');
-            $('#NetworkPlayPauseButton').empty();
-            $('#NetworkPlayPauseButton').addClass('btn-success');
-            $('#NetworkPlayPauseButton').append('<i class="bx bx-play fs-xl"></i>');
+            $("#NetworkPlayPauseButton").removeClass("btn-success");
+            $("#NetworkPlayPauseButton").removeClass("btn-warning");
+            $("#NetworkPlayPauseButton").empty();
+            $("#NetworkPlayPauseButton").addClass("btn-success");
+            $("#NetworkPlayPauseButton").append('<i class="bx bx-play fs-xl"></i>');
             return;
         });
 
@@ -1916,132 +1918,158 @@ const SetNetworkPlayerState = function(simultaion_id)
 
     // No packets.
     // The network is simulating?
-    if (simultaion_id)
-    {
-        $('#NetworkPlayer').empty();
-        $('#PacketSliderInput').hide();
-        $('#NetworkPlayer').append('<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Эмулируется...</button>');
-        InsertWaitingTime()
+    if (simultaion_id) {
+        $("#NetworkPlayer").empty();
+        $("#PacketSliderInput").hide();
+        $("#NetworkPlayer").append(
+            '<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Эмулируется...</button>'
+        );
+        InsertWaitingTime();
         CheckSimulation(simultaion_id);
         return;
     }
 
     // No packets and no simulation.
     // Add emulation button.
-    $('#NetworkPlayer').empty();
-    $('#PacketSliderInput').hide();
-    $('#NetworkPlayer').append('<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton">Эмулировать</button>');
-    $('#NetworkPlayerLabel').empty();
-
-    $('#NetworkEmulateButton').click(function() {
-
+    $("#NetworkPlayer").empty();
+    $("#PacketSliderInput").hide();
+    $("#NetworkPlayer").append(
+        '<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton">Эмулировать</button>'
+    );
+    $("#NetworkPlayerLabel").empty();
+
+    $("#NetworkEmulateButton").click(function () {
         // Check for job. If no job - show modal and exit.
-        if (!jobs.length)
-        {
-            $('#noJobsModal').modal('toggle');
+        if (!jobs.length) {
+            $("#noJobsModal").modal("toggle");
             return;
         }
 
-        if (nodes.length > 80)
-        {
-            $('#tooManyHostModal').modal('toggle');
+        if (nodes.length > 80) {
+            $("#tooManyHostModal").modal("toggle");
             return;
         }
 
-        if (typeof window.ym != 'undefined')
-        {
-            ym(92293993,'reachGoal','NetworkEmulate');
+        if (typeof window.ym != "undefined") {
+            ym(92293993, "reachGoal", "NetworkEmulate");
         }
 
         RunSimulation(network_guid);
 
-        $('#NetworkPlayer').empty();
-        $('#NetworkPlayer').append('<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Эмулируется...</button>');
+        $("#NetworkPlayer").empty();
+        $("#NetworkPlayer").append(
+            '<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Эмулируется...</button>'
+        );
         InsertWaitingTime();
         return;
     });
 
     return;
-
-}
+};
 
 // 2 states:
 // No packets - disable button.
 // We have a packets and ready to play packets
-const SetSharedNetworkPlayerState = function()
-{
-
+const SetSharedNetworkPlayerState = function () {
     // If we have packets, then we're ready to run
-    if (packets)
-    {
-        $('#NetworkPlayer').empty();
-        $('#NetworkPlayer').append('<button type="button" class="btn btn-danger me-2" id="NetworkStopButton"><i class="bx bx-stop fs-xl"></i></button>');
-        $('#NetworkPlayer').append('<button type="button" class="btn btn-success" id="NetworkPlayPauseButton" onclick="if (typeof window.ym != \'undefined\'){ym(92293993,\'reachGoal\',\'PlayPauseButton\');}"><i class="bx bx-play fs-xl"></i></button>');
+    if (packets) {
+        $("#NetworkPlayer").empty();
+        $("#NetworkPlayer").append(
+            '<button type="button" class="btn btn-danger me-2" id="NetworkStopButton"><i class="bx bx-stop fs-xl"></i></button>'
+        );
+        $("#NetworkPlayer").append(
+            '<button type="button" class="btn btn-success" id="NetworkPlayPauseButton" onclick="if (typeof window.ym != \'undefined\'){ym(92293993,\'reachGoal\',\'PlayPauseButton\');}"><i class="bx bx-play fs-xl"></i></button>'
+        );
 
         // Init player
         PacketPlayer.getInstance().InitPlayer(packets);
 
         // Configure the slider
-        $('#PacketSliderInput')[0].noUiSlider.updateOptions({
+        $("#PacketSliderInput")[0].noUiSlider.updateOptions({
             start: [1],
             range: {
-                'min': 1,
-                'max': packets.length,
+                min: 1,
+                max: packets.length,
             },
             format: {
-                to: function (val){return '' + val},
-                from: function (val){return '' + val},
+                to: function (val) {
+                    return "" + val;
+                },
+                from: function (val) {
+                    return "" + val;
+                },
             },
             tooltips: false,
         });
 
         // Show Slider on
-        $('#PacketSliderInput').show();
+        $("#PacketSliderInput").show();
 
-        const pkt_count = packets.reduce((currentCount, row) => currentCount + row.length, 0);
-        $('#NetworkPlayerLabel').text(packets.length + ' ' + NumWord(packets.length, ['шаг', 'шага', 'шагов']) + ' / ' + pkt_count + ' ' + NumWord(pkt_count, ['пакет', 'пакета', 'пакетов']));
+        const pkt_count = packets.reduce(
+            (currentCount, row) => currentCount + row.length,
+            0
+        );
+        $("#NetworkPlayerLabel").text(
+            packets.length +
+            " " +
+            NumWord(packets.length, ["шаг", "шага", "шагов"]) +
+            " / " +
+            pkt_count +
+            " " +
+            NumWord(pkt_count, ["пакет", "пакета", "пакетов"])
+        );
 
-        $('#PacketSliderInput')[0].noUiSlider.on('slide', function (e) {
+        $("#PacketSliderInput")[0].noUiSlider.on("slide", function (e) {
             if (!e) return;
-            let x =  Math.round(e[0]);
-            PacketPlayer.getInstance().setAnimationTrafficStep(x-1);
+            let x = Math.round(e[0]);
+            PacketPlayer.getInstance().setAnimationTrafficStep(x - 1);
         });
 
-        $('#PacketSliderInput')[0].noUiSlider.on('update', function (e) {
+        $("#PacketSliderInput")[0].noUiSlider.on("update", function (e) {
             if (!e) return;
-            let x =  Math.round(e[0]);
-            if (packets.length === 0){
-                $('#NetworkPlayerLabel').text('0 пакетов');
+            let x = Math.round(e[0]);
+            if (packets.length === 0) {
+                $("#NetworkPlayerLabel").text("0 пакетов");
                 return;
             }
-            $('#NetworkPlayerLabel').text('Шаг: ' + x + '/' + packets.length + ' (' +  packets[x-1].length + ' ' + NumWord(packets[x-1].length, ['пакет', 'пакета', 'пакетов']) + ')');
+            $("#NetworkPlayerLabel").text(
+                "Шаг: " +
+                x +
+                "/" +
+                packets.length +
+                " (" +
+                packets[x - 1].length +
+                " " +
+                NumWord(packets[x - 1].length, ["пакет", "пакета", "пакетов"]) +
+                ")"
+            );
         });
 
         // Set click handlers
-        $('#NetworkPlayPauseButton').click(function() {
-
+        $("#NetworkPlayPauseButton").click(function () {
             // If btn-success then start to play
-            if ($(this).hasClass("btn-success")){
-                $(this).removeClass('btn-success');
-                $(this).addClass('btn-warning');
+            if ($(this).hasClass("btn-success")) {
+                $(this).removeClass("btn-success");
+                $(this).addClass("btn-warning");
 
                 $(this).empty();
                 $(this).append('<i class="bx bx-pause fs-xl"></i>');
 
                 // If not in pause. Draw a new layout and go.
-                if (!PacketPlayer.getInstance().getPlayerPause())
-                {
+                if (!PacketPlayer.getInstance().getPlayerPause()) {
                     DrawGraphStatic(nodes, edges);
                 }
 
-                PacketPlayer.getInstance().setAnimationTrafficStepCallback(function() {
-                    $('#PacketSliderInput')[0].noUiSlider.set(PacketPlayer.getInstance().getAnimationTrafficStep());
+                PacketPlayer.getInstance().setAnimationTrafficStepCallback(function () {
+                    $("#PacketSliderInput")[0].noUiSlider.set(
+                        PacketPlayer.getInstance().getAnimationTrafficStep()
+                    );
                 });
 
                 PacketPlayer.getInstance().StartPlayer(global_cy);
             } else {
-                $(this).removeClass('btn-warning');
-                $(this).addClass('btn-success');
+                $(this).removeClass("btn-warning");
+                $(this).addClass("btn-success");
                 $(this).empty();
                 $(this).append('<i class="bx bx-play fs-xl"></i>');
 
@@ -2050,21 +2078,20 @@ const SetSharedNetworkPlayerState = function()
             }
         });
 
-        $('#NetworkStopButton').click(function() {
-
+        $("#NetworkStopButton").click(function () {
             PacketPlayer.getInstance().resetAnimationTrafficStepCallback();
             PacketPlayer.getInstance().StopPlayer();
 
             // Reset slider.
-            $('#PacketSliderInput')[0].noUiSlider.set(0);
+            $("#PacketSliderInput")[0].noUiSlider.set(0);
 
             DrawSharedGraph(nodes, edges);
 
-            $('#NetworkPlayPauseButton').removeClass('btn-success');
-            $('#NetworkPlayPauseButton').removeClass('btn-warning');
-            $('#NetworkPlayPauseButton').empty();
-            $('#NetworkPlayPauseButton').addClass('btn-success');
-            $('#NetworkPlayPauseButton').append('<i class="bx bx-play fs-xl"></i>');
+            $("#NetworkPlayPauseButton").removeClass("btn-success");
+            $("#NetworkPlayPauseButton").removeClass("btn-warning");
+            $("#NetworkPlayPauseButton").empty();
+            $("#NetworkPlayPauseButton").addClass("btn-success");
+            $("#NetworkPlayPauseButton").append('<i class="bx bx-play fs-xl"></i>');
             return;
         });
 
@@ -2073,56 +2100,56 @@ const SetSharedNetworkPlayerState = function()
 
     // No packets
     // Add info button
-    $('#NetworkPlayer').empty();
-    $('#PacketSliderInput').hide();
-    $('#NetworkPlayerLabel').empty();
-    $('#NetworkPlayer').append('<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Нет эмуляции</button>');
+    $("#NetworkPlayer").empty();
+    $("#PacketSliderInput").hide();
+    $("#NetworkPlayerLabel").empty();
+    $("#NetworkPlayer").append(
+        '<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Нет эмуляции</button>'
+    );
     return;
-}
+};
 
 // Take a picture and update it.
-const TakeGraphPictureAndUpdate = function()
-{
-    if (!global_cy)
-    {
+const TakeGraphPictureAndUpdate = function () {
+    if (!global_cy) {
         return;
     }
 
-    let png_blob = global_cy.png({output: 'blob', maxWidth: 512, maxHeight: 512});
+    let png_blob = global_cy.png({
+        output: "blob",
+        maxWidth: 512,
+        maxHeight: 512,
+    });
 
     $.ajax({
-        type: 'POST',
-        url: '/network/upload_network_picture?guid=' + network_guid,
+        type: "POST",
+        url: "/network/upload_network_picture?guid=" + network_guid,
         data: png_blob,
         processData: false,
-        error: function(xhr) {
-
-            if (xhr.status != 200){
-                console.log('Cannot upload graph picture');
+        error: function (xhr) {
+            if (xhr.status != 200) {
+                console.log("Cannot upload graph picture");
             }
-
         },
-        dataType: 'image/png'
+        dataType: "image/png",
     });
-}
+};
 
 // Calculate drop offsets
-const CalculateDropOffset = function(elem_x, elem_y)
-{
+const CalculateDropOffset = function (elem_x, elem_y) {
     const network_scheme = document.getElementById("network_scheme");
     let offset_left = 0;
     let offset_top = 0;
-    let ret = {'x' : 0, 'y' : 0};
+    let ret = { x: 0, y: 0 };
 
     console.log(elem_x + ", " + elem_y);
 
-    if (network_scheme){
+    if (network_scheme) {
         ret.x += network_scheme.offsetLeft - 25;
         ret.y += network_scheme.offsetTop - 15;
     }
 
-    if (global_cy)
-    {
+    if (global_cy) {
         ret.x = ret.x + global_cy.pan().x;
         ret.y = ret.y + global_cy.pan().y;
 
@@ -2131,76 +2158,75 @@ const CalculateDropOffset = function(elem_x, elem_y)
     }
 
     return ret;
-}
+};
 
-const UpdateNetworkConfig = function()
-{
-    if (!global_cy){
+const UpdateNetworkConfig = function () {
+    if (!global_cy) {
         return;
     }
 
-    let data = {'network_title' : network_title, 'network_description' : network_description,
-    'zoom' : global_cy.zoom(),'pan_x' : global_cy.pan().x, 'pan_y' : global_cy.pan().y};
+    let data = {
+        network_title: network_title,
+        network_description: network_description,
+        zoom: global_cy.zoom(),
+        pan_x: global_cy.pan().x,
+        pan_y: global_cy.pan().y,
+    };
 
     $.ajax({
-        type: 'POST',
-        url: '/network/update_network_config?guid=' + network_guid,
+        type: "POST",
+        url: "/network/update_network_config?guid=" + network_guid,
         data: JSON.stringify(data),
         contentType: "application/json; charset=utf-8",
-        success: function(data, textStatus, xhr) {
-        },
-        error: function(xhr) {
-            console.log('Cannot update network config');
+        success: function (data, textStatus, xhr) { },
+        error: function (xhr) {
+            console.log("Cannot update network config");
             console.log(xhr);
         },
-        dataType: 'json'
+        dataType: "json",
     });
+};
 
-}
-
-const CopyNetwork = function ()
-{
+const CopyNetwork = function () {
     $.ajax({
-        type: 'POST',
-        url: '/network/copy_network?guid=' + network_guid,
-        data: '',
-        success: function(data, textStatus, xhr) {
-            if (xhr.status === 200)
-            {
+        type: "POST",
+        url: "/network/copy_network?guid=" + network_guid,
+        data: "",
+        success: function (data, textStatus, xhr) {
+            if (xhr.status === 200) {
                 console.log("Copy network is made.");
-                $('#ModalCopy').modal('show');
-                $('.modal-option').click(function() {
-                var selectedOption = $(this).attr('data-option');
-                    if (selectedOption === 'edit') {
+                $("#ModalCopy").modal("show");
+                $(".modal-option").click(function () {
+                    var selectedOption = $(this).attr("data-option");
+                    if (selectedOption === "edit") {
                         var newUrl = data.new_url;
                         window.location.href = newUrl;
-                        console.log('Go to editing');
-                    } else if (selectedOption === 'continue') {
-                        console.log('Continue here');
+                        console.log("Go to editing");
+                    } else if (selectedOption === "continue") {
+                        console.log("Continue here");
                     }
-                $('#ModalCopy').modal('hide');
+                    $("#ModalCopy").modal("hide");
                 });
             }
         },
-        error: function(err) {
-            console.log('Copy has not been made.');
+        error: function (err) {
+            console.log("Copy has not been made.");
         },
         contentType: "application/json",
-        dataType: 'json'
+        dataType: "json",
     });
-}
-
+};
 
-const NumWord = function (value, words){
+const NumWord = function (value, words) {
     value = Math.abs(value) % 100;
     var num = value % 10;
-    if(value > 10 && value < 20) return words[2];
-    if(num > 1 && num < 5) return words[1];
-    if(num == 1) return words[0];
+    if (value > 10 && value < 20) return words[2];
+    if (num > 1 && num < 5) return words[1];
+    if (num == 1) return words[0];
     return words[2];
-}
+};
 
-const SaveNetworkObject = function (){
+const SaveNetworkObject = function () {
     let n = JSON.parse(JSON.stringify(nodes));
     let e = JSON.parse(JSON.stringify(edges));
 
@@ -2210,17 +2236,17 @@ const SaveNetworkObject = function (){
     });
 
     return 0;
-}
+};
 
-const RestoreNetworkObject = function (){
+const RestoreNetworkObject = function () {
     let x = NetworkCache.pop();
 
-    if (!x){
+    if (!x) {
         return;
     }
 
-    nodes=x.nodes;
-    edges=x.edges;
+    nodes = x.nodes;
+    edges = x.edges;
 
     return 0;
-}
+};
diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index 7e97ccda..d57daadb 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -133,6 +133,18 @@ <h5 class="modal-title" id="netConfigModalLabel">Настройки сети</h5
                             <label for="network_description" class="text-sm pt-2">Описание сети</label>
                             <textarea rows="3" class="form-control form-control-sm" id="network_description" name="network_description">{{ network.description }}</textarea>
                         </div>
+                        <hr class="my-3">
+                        <div>
+                            <h6>Настройки анимации</h6>
+                            <div>
+                                <input class="form-check-input" role="switch" type="checkbox" id="ARPFilterCheckbox" name="ARPFilterCheckbox">
+                                <label for="ARPFilterCheckbox"> Пропустить ARP пакеты </label>
+                            </div>
+                            <div>
+                                <input class="form-check-input" role="switch" type="checkbox" id="STPFilterCheckbox" name="STPFilterCheckbox">
+                                <label for="STPFilterCheckbox"> Пропустить STP/RSTP пакеты </label>
+                            </div>
+                        </div>
                     </form>
                 </div>
                 <div class="modal-footer">
@@ -279,7 +291,11 @@ <h6 class="mb-2">Наше компьюнити</h6>
 
 <script>
     $(document).ready(function() {
-        $("#networkConfigrationCancel").click(function(){
+        $("#netConfigModal").on("hidden.bs.modal", function() {
+            RecoverFilterStates();
+        })
+
+        $("#networkConfigurationCancel").click(function(){
             $('#netConfigModal').modal('hide');
         });
 
@@ -291,6 +307,7 @@ <h6 class="mb-2">Наше компьюнити</h6>
             network_title = $("#network_title").val();
             network_description = $("#network_description").val();
             UpdateNetworkConfig();
+            SetPacketFilter();
             $('#netConfigModal').modal('hide');
             $('#network_title_head').text(network_title);
         });
@@ -301,6 +318,7 @@ <h6 class="mb-2">Наше компьюнити</h6>
                 network_title = $("#network_title").val();
                 network_description = $("#network_description").val();
                 UpdateNetworkConfig();
+                SetPacketFilter();
                 $('#netConfigModal').modal('hide');
                 $('#network_title_head').text(network_title);
                 return false;
diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
new file mode 100644
index 00000000..0ce770f3
--- /dev/null
+++ b/front/tests/test_packet_filters.py
@@ -0,0 +1,211 @@
+import pytest
+from selenium.webdriver.common.by import By
+
+from conftest import MiminetTester
+from utils.locators import Location
+from utils.networks import MiminetTestNetwork
+
+
+class TestPacketFilters:
+    @pytest.fixture(scope="class")
+    def network(self, selenium: MiminetTester):
+        test_network = MiminetTestNetwork(selenium)
+        yield test_network
+        test_network.delete()
+
+    def _wait_filter_state_ready(self, selenium: MiminetTester):
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return typeof filterState !== 'undefined' && "
+                "typeof SetPacketFilter === 'function';"
+            )
+        )
+
+    def _open_settings_modal(self, selenium: MiminetTester):
+        selenium.find_element(
+            By.CSS_SELECTOR, Location.Network.TopButton.OPTIONS.selector
+        ).click()
+        selenium.wait_until_appear(By.CSS_SELECTOR, "#netConfigModal")
+
+    def _save_network_settings(self, selenium: MiminetTester):
+        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
+
+    def _close_settings_modal(self, selenium: MiminetTester):
+        selenium.execute_script("$('#netConfigModal').modal('hide');")
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return !document.querySelector('#netConfigModal')"
+                " || $('#netConfigModal').is(':hidden');"
+            )
+        )
+
+    def _checkbox_state(self, selenium: MiminetTester, checkbox_id: str):
+        return selenium.execute_script(
+            f"var el = document.getElementById('{checkbox_id}');"
+            "return el ? el.checked : null;"
+        )
+
+    def _prepare_packets(self, selenium: MiminetTester, labels: list[str]):
+        selenium.execute_script(
+            """
+            filterState.hideARP = false;
+            filterState.hideSTP = false;
+            packets_not_filtered = null;
+            packets = arguments[0].map(function(label){ return [{ data: { label: label } }]; });
+            pcaps = [];
+            """,
+            labels,
+        )
+
+    def test_enable_arp_filter_filters_packets(
+        self, selenium: MiminetTester, network: MiminetTestNetwork
+    ):
+        selenium.get(network.url)
+        self._wait_filter_state_ready(selenium)
+
+        self._prepare_packets(selenium, ["ARP packet", "ICMP packet"])
+
+        self._open_settings_modal(selenium)
+        arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
+        if not arp_checkbox.is_selected():
+            arp_checkbox.click()
+        self._save_network_settings(selenium)
+        self._close_settings_modal(selenium)
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return filterState.hideARP === true"
+                " && Array.isArray(packets)"
+                " && packets.length === 1"
+                " && packets[0].length === 1"
+                " && !packets[0][0].data.label.startsWith('ARP');"
+            )
+        )
+
+        filtered_packets = selenium.execute_script("return packets;")
+        assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
+
+        self._open_settings_modal(selenium)
+        assert self._checkbox_state(selenium, "ARPFilterCheckbox") is True, (
+            "ARP checkbox should remain selected after saving"
+        )
+        self._close_settings_modal(selenium)
+
+    def test_cancel_does_not_change_filter_state(
+        self, selenium: MiminetTester, network: MiminetTestNetwork
+    ):
+        selenium.get(network.url)
+        self._wait_filter_state_ready(selenium)
+
+        initial_state = selenium.execute_script("return filterState.hideARP === true;")
+
+        self._open_settings_modal(selenium)
+        arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
+        arp_checkbox.click()  # toggle current state
+        self._close_settings_modal(selenium)  # close without saving
+
+        current_state = selenium.execute_script("return filterState.hideARP === true;")
+        assert current_state == initial_state, (
+            "Filter state must not change when closing without saving"
+        )
+
+        self._open_settings_modal(selenium)
+        assert self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state, (
+            "ARP checkbox should display the original value after cancel"
+        )
+        self._close_settings_modal(selenium)
+
+    def test_enable_stp_filter_filters_packets(
+        self, selenium: MiminetTester, network: MiminetTestNetwork
+    ):
+        selenium.get(network.url)
+        self._wait_filter_state_ready(selenium)
+
+        self._prepare_packets(
+            selenium,
+            [
+                "STP packet",
+                "RSTP packet",
+                "ICMP packet",
+            ],
+        )
+
+        self._open_settings_modal(selenium)
+        stp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#STPFilterCheckbox")
+        if not stp_checkbox.is_selected():
+            stp_checkbox.click()
+        self._save_network_settings(selenium)
+        self._close_settings_modal(selenium)
+
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return filterState.hideSTP === true"
+                " && Array.isArray(packets)"
+                " && packets.length === 1"
+                " && packets[0].length === 1"
+                " && !packets[0][0].data.label.startsWith('STP')"
+                " && !packets[0][0].data.label.startsWith('RSTP');"
+            )
+        )
+
+        filtered_packets = selenium.execute_script("return packets;")
+        assert filtered_packets[0][0]["data"]["label"] == "ICMP packet"
+
+        self._open_settings_modal(selenium)
+        assert self._checkbox_state(selenium, "STPFilterCheckbox") is True, (
+            "STP checkbox should remain selected after saving"
+        )
+        self._close_settings_modal(selenium)
+
+    def test_disabling_filters_restores_packets(
+        self, selenium: MiminetTester, network: MiminetTestNetwork
+    ):
+        selenium.get(network.url)
+        self._wait_filter_state_ready(selenium)
+
+        self._prepare_packets(
+            selenium,
+            [
+                "ARP packet",
+                "STP packet",
+            ],
+        )
+
+        # Enable both filters and apply
+        self._open_settings_modal(selenium)
+        arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
+        stp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#STPFilterCheckbox")
+        if not arp_checkbox.is_selected():
+            arp_checkbox.click()
+        if not stp_checkbox.is_selected():
+            stp_checkbox.click()
+        self._save_network_settings(selenium)
+        self._close_settings_modal(selenium)
+
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return filterState.hideARP === true"
+                " && filterState.hideSTP === true"
+                " && Array.isArray(packets)"
+                " && packets.length === 0;"
+            )
+        )
+
+        # Disable filters and ensure packets come back
+        self._open_settings_modal(selenium)
+        arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
+        stp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#STPFilterCheckbox")
+        if arp_checkbox.is_selected():
+            arp_checkbox.click()
+        if stp_checkbox.is_selected():
+            stp_checkbox.click()
+        self._save_network_settings(selenium)
+        self._close_settings_modal(selenium)
+
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return filterState.hideARP === false"
+                " && filterState.hideSTP === false"
+                " && Array.isArray(packets)"
+                " && packets.length === 2;"
+            )
+        )

From fb96d38b8c4a3fd8f0ee8fb9ce24ee09f0904f52 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Wed, 5 Nov 2025 12:09:24 +0300
Subject: [PATCH 17/33] fix: fixed packet label in tests

---
 front/tests/test_packet_filters.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index 0ce770f3..a1c9488f 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -82,7 +82,7 @@ def test_enable_arp_filter_filters_packets(
         )
 
         filtered_packets = selenium.execute_script("return packets;")
-        assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
+        assert filtered_packets[0][0]["data"]["label"] == "ICMP packet"
 
         self._open_settings_modal(selenium)
         assert self._checkbox_state(selenium, "ARPFilterCheckbox") is True, (

From b94b84735c17fbda7c9870afb0e057aee748c3a3 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Wed, 5 Nov 2025 12:17:00 +0300
Subject: [PATCH 18/33] test: refactor packet filters test & add a new test

---
 front/tests/test_packet_filters.py | 101 ++++++++++++++++++++++-------
 1 file changed, 78 insertions(+), 23 deletions(-)

diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index c3cc3d16..a1c9488f 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -27,6 +27,9 @@ def _open_settings_modal(self, selenium: MiminetTester):
         ).click()
         selenium.wait_until_appear(By.CSS_SELECTOR, "#netConfigModal")
 
+    def _save_network_settings(self, selenium: MiminetTester):
+        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
+
     def _close_settings_modal(self, selenium: MiminetTester):
         selenium.execute_script("$('#netConfigModal').modal('hide');")
         selenium.wait_for(
@@ -60,15 +63,13 @@ def test_enable_arp_filter_filters_packets(
         selenium.get(network.url)
         self._wait_filter_state_ready(selenium)
 
-        self._prepare_packets(
-            selenium, ["ARP Request: who-has 10.0.0.1", "ICMP Echo Reply"]
-        )
+        self._prepare_packets(selenium, ["ARP packet", "ICMP packet"])
 
         self._open_settings_modal(selenium)
         arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
         if not arp_checkbox.is_selected():
             arp_checkbox.click()
-        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
+        self._save_network_settings(selenium)
         self._close_settings_modal(selenium)
         selenium.wait_for(
             lambda driver: driver.execute_script(
@@ -81,12 +82,12 @@ def test_enable_arp_filter_filters_packets(
         )
 
         filtered_packets = selenium.execute_script("return packets;")
-        assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
+        assert filtered_packets[0][0]["data"]["label"] == "ICMP packet"
 
         self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "ARPFilterCheckbox") is True
-        ), "ARP checkbox should remain selected after saving"
+        assert self._checkbox_state(selenium, "ARPFilterCheckbox") is True, (
+            "ARP checkbox should remain selected after saving"
+        )
         self._close_settings_modal(selenium)
 
     def test_cancel_does_not_change_filter_state(
@@ -100,17 +101,17 @@ def test_cancel_does_not_change_filter_state(
         self._open_settings_modal(selenium)
         arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
         arp_checkbox.click()  # toggle current state
-        self._close_settings_modal(selenium)
+        self._close_settings_modal(selenium)  # close without saving
 
         current_state = selenium.execute_script("return filterState.hideARP === true;")
-        assert (
-            current_state == initial_state
-        ), "Filter state must not change when closing without saving"
+        assert current_state == initial_state, (
+            "Filter state must not change when closing without saving"
+        )
 
         self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state
-        ), "ARP checkbox should display the original value after cancel"
+        assert self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state, (
+            "ARP checkbox should display the original value after cancel"
+        )
         self._close_settings_modal(selenium)
 
     def test_enable_stp_filter_filters_packets(
@@ -122,9 +123,9 @@ def test_enable_stp_filter_filters_packets(
         self._prepare_packets(
             selenium,
             [
-                "STP Configuration BPDU",
-                "RSTP Topology Change",
-                "ICMP Echo Reply",
+                "STP packet",
+                "RSTP packet",
+                "ICMP packet",
             ],
         )
 
@@ -132,7 +133,7 @@ def test_enable_stp_filter_filters_packets(
         stp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#STPFilterCheckbox")
         if not stp_checkbox.is_selected():
             stp_checkbox.click()
-        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
+        self._save_network_settings(selenium)
         self._close_settings_modal(selenium)
 
         selenium.wait_for(
@@ -147,10 +148,64 @@ def test_enable_stp_filter_filters_packets(
         )
 
         filtered_packets = selenium.execute_script("return packets;")
-        assert filtered_packets[0][0]["data"]["label"] == "ICMP Echo Reply"
+        assert filtered_packets[0][0]["data"]["label"] == "ICMP packet"
 
         self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "STPFilterCheckbox") is True
-        ), "STP checkbox should remain selected after saving"
+        assert self._checkbox_state(selenium, "STPFilterCheckbox") is True, (
+            "STP checkbox should remain selected after saving"
+        )
         self._close_settings_modal(selenium)
+
+    def test_disabling_filters_restores_packets(
+        self, selenium: MiminetTester, network: MiminetTestNetwork
+    ):
+        selenium.get(network.url)
+        self._wait_filter_state_ready(selenium)
+
+        self._prepare_packets(
+            selenium,
+            [
+                "ARP packet",
+                "STP packet",
+            ],
+        )
+
+        # Enable both filters and apply
+        self._open_settings_modal(selenium)
+        arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
+        stp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#STPFilterCheckbox")
+        if not arp_checkbox.is_selected():
+            arp_checkbox.click()
+        if not stp_checkbox.is_selected():
+            stp_checkbox.click()
+        self._save_network_settings(selenium)
+        self._close_settings_modal(selenium)
+
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return filterState.hideARP === true"
+                " && filterState.hideSTP === true"
+                " && Array.isArray(packets)"
+                " && packets.length === 0;"
+            )
+        )
+
+        # Disable filters and ensure packets come back
+        self._open_settings_modal(selenium)
+        arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
+        stp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#STPFilterCheckbox")
+        if arp_checkbox.is_selected():
+            arp_checkbox.click()
+        if stp_checkbox.is_selected():
+            stp_checkbox.click()
+        self._save_network_settings(selenium)
+        self._close_settings_modal(selenium)
+
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return filterState.hideARP === false"
+                " && filterState.hideSTP === false"
+                " && Array.isArray(packets)"
+                " && packets.length === 2;"
+            )
+        )

From 5389a13010fdfb8b71c101c4ace070d61ba81b1b Mon Sep 17 00:00:00 2001
From: pechenb <romkor2006@gmail.com>
Date: Wed, 5 Nov 2025 12:21:06 +0300
Subject: [PATCH 19/33] style

---
 front/tests/test_packet_filters.py | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index a1c9488f..b31ea948 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -85,9 +85,9 @@ def test_enable_arp_filter_filters_packets(
         assert filtered_packets[0][0]["data"]["label"] == "ICMP packet"
 
         self._open_settings_modal(selenium)
-        assert self._checkbox_state(selenium, "ARPFilterCheckbox") is True, (
-            "ARP checkbox should remain selected after saving"
-        )
+        assert (
+            self._checkbox_state(selenium, "ARPFilterCheckbox") is True
+        ), "ARP checkbox should remain selected after saving"
         self._close_settings_modal(selenium)
 
     def test_cancel_does_not_change_filter_state(
@@ -104,14 +104,14 @@ def test_cancel_does_not_change_filter_state(
         self._close_settings_modal(selenium)  # close without saving
 
         current_state = selenium.execute_script("return filterState.hideARP === true;")
-        assert current_state == initial_state, (
-            "Filter state must not change when closing without saving"
-        )
+        assert (
+            current_state == initial_state
+        ), "Filter state must not change when closing without saving"
 
         self._open_settings_modal(selenium)
-        assert self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state, (
-            "ARP checkbox should display the original value after cancel"
-        )
+        assert (
+            self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state
+        ), "ARP checkbox should display the original value after cancel"
         self._close_settings_modal(selenium)
 
     def test_enable_stp_filter_filters_packets(
@@ -151,9 +151,9 @@ def test_enable_stp_filter_filters_packets(
         assert filtered_packets[0][0]["data"]["label"] == "ICMP packet"
 
         self._open_settings_modal(selenium)
-        assert self._checkbox_state(selenium, "STPFilterCheckbox") is True, (
-            "STP checkbox should remain selected after saving"
-        )
+        assert (
+            self._checkbox_state(selenium, "STPFilterCheckbox") is True
+        ), "STP checkbox should remain selected after saving"
         self._close_settings_modal(selenium)
 
     def test_disabling_filters_restores_packets(

From 3c74e38f46bfd6147a69760e57bad85b7849c0ee Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Sat, 8 Nov 2025 09:44:58 +0300
Subject: [PATCH 20/33] fix: fixed networkConfigrationCancel button not working

---
 front/src/templates/base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index d57daadb..fe3a4a12 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -295,7 +295,7 @@ <h6 class="mb-2">Наше компьюнити</h6>
             RecoverFilterStates();
         })
 
-        $("#networkConfigurationCancel").click(function(){
+        $("#networkConfigrationCancel").click(function(){
             $('#netConfigModal').modal('hide');
         });
 

From 2ce66d71fc947b5bf5b7cab8b184982fb28776f2 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Sat, 8 Nov 2025 11:48:46 +0300
Subject: [PATCH 21/33] feat: added ability to change filters in shared
 networks

---
 front/src/app.py                        | 11 ++++++++-
 front/src/templates/base.html           | 33 ++++++++++++++-----------
 front/src/templates/network.html        | 12 +++------
 front/src/templates/network_shared.html | 12 +++------
 4 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/front/src/app.py b/front/src/app.py
index 243e9bc4..054c88e7 100644
--- a/front/src/app.py
+++ b/front/src/app.py
@@ -3,7 +3,7 @@
 from datetime import datetime
 from dotenv import load_dotenv
 
-from flask import Flask, make_response, render_template
+from flask import Flask, make_response, render_template, request, has_request_context
 from flask_admin import Admin
 from flask_login import current_user, login_required
 from flask_migrate import Migrate
@@ -219,6 +219,15 @@
     "/quiz/question/delete", methods=["DELETE"], view_func=delete_question_endpoint
 )
 
+
+@app.context_processor
+def inject_shared_flag():
+    if not has_request_context():
+        return {"is_shared": False}
+
+    return {"is_shared": request.endpoint == "web_network_shared"}
+
+
 app.add_url_rule(
     "/quiz/question/all", methods=["GET"], view_func=get_questions_by_section_endpoint
 )
diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index fe3a4a12..124b6d41 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -47,7 +47,7 @@
         {% if network %}
             {% if current_user.is_authenticated %}
                 <div class="mx-auto navbar-nav">
-                    {% if request.path != url_for('web_network_shared') %}
+                    {% if not is_shared %}
                     <a class="d-inline nav-link" href="{{ url_for('home') }}">Мои сети</a>
                     <a class="d-inline nav-link" href="#"> / </a>
                     {% endif %}
@@ -61,7 +61,7 @@
                     <a class="btn btn-outline-primary btn-icon me-4" data-target="#ModalCopy" id="copy-network" data-toggle="tooltip" data-bs-placement="bottom" title="Сохранить копию" onclick="CopyNetwork()">
                         <i class='bx bx-copy fs-4 mx-1'></i>
                     </a>
-                    <a {% if request.path != url_for('web_network_shared') %} class="btn btn-outline-primary btn-icon" {% else %} class="btn btn-outline-primary btn-icon disabled" {% endif %} href="#netConfigModal" id="net-settings" data-bs-toggle="modal" data-target="#netConfigModal" data-toggle="tooltip" data-bs-placement="bottom" title="Настройки сети"><i class='bx bx-cog fs-4 mx-1'></i></a>
+                    <a class="btn btn-outline-primary btn-icon" href="#netConfigModal" id="net-settings" data-bs-toggle="modal" data-target="#netConfigModal" data-toggle="tooltip" data-bs-placement="bottom" title="Настройки сети"><i class='bx bx-cog fs-4 mx-1'></i></a>
                 </div>
             {% else %}
                 <div class="mx-auto navbar-nav">
@@ -128,27 +128,30 @@ <h5 class="modal-title" id="netConfigModalLabel">Настройки сети</h5
                     <form id="networkConfigrationForm" method="POST" action="">
                         <div class="form-group">
                             <label for="network_title" class="text-sm">Название сети</label>
-                            <input type="text" class="form-control form-control-sm" id="network_title" name="network_title" value='{{ network.title }}'>
+                            <input type="text" class="form-control form-control-sm" id="network_title" name="network_title" value='{{ network.title }}' {{ 'disabled' if is_shared else '' }}>
 
                             <label for="network_description" class="text-sm pt-2">Описание сети</label>
-                            <textarea rows="3" class="form-control form-control-sm" id="network_description" name="network_description">{{ network.description }}</textarea>
+                            <textarea rows="3" class="form-control form-control-sm" id="network_description" name="network_description" {{ 'disabled' if is_shared else '' }}>{{ network.description }}</textarea>
                         </div>
-                        <hr class="my-3">
-                        <div>
+                            <hr class="my-3">
                             <h6>Настройки анимации</h6>
-                            <div>
-                                <input class="form-check-input" role="switch" type="checkbox" id="ARPFilterCheckbox" name="ARPFilterCheckbox">
-                                <label for="ARPFilterCheckbox"> Пропустить ARP пакеты </label>
-                            </div>
-                            <div>
-                                <input class="form-check-input" role="switch" type="checkbox" id="STPFilterCheckbox" name="STPFilterCheckbox">
-                                <label for="STPFilterCheckbox"> Пропустить STP/RSTP пакеты </label>
-                            </div>
+                        <div>
+                            <input class="form-check-input" role="switch" type="checkbox" id="ARPFilterCheckbox" name="ARPFilterCheckbox">
+                            <label for="ARPFilterCheckbox"> Пропустить ARP пакеты </label>
+                        </div>
+                        <div>
+                            <input class="form-check-input" role="switch" type="checkbox" id="STPFilterCheckbox" name="STPFilterCheckbox">
+                            <label for="STPFilterCheckbox"> Пропустить STP/RSTP пакеты </label>
                         </div>
                     </form>
                 </div>
                 <div class="modal-footer">
-                    <button id="networkDeleteButton" type="button" data-toggle="modal" class="btn btn-danger" href="#deleteNetConfirmModal">Удалить сеть</button>
+                    <button id="networkDeleteButton" type="button" data-toggle="modal"
+                        class="btn btn-danger{% if is_shared %} disabled{% endif %}"
+                        {% if is_shared %}disabled{% endif %}
+                        href="#deleteNetConfirmModal">
+                        Удалить сеть
+                    </button>
                     <button id="networkConfigrationCancel" type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                     <button id="networkConfigrationSubmit" type="button" class="btn btn-primary">Сохранить</button>
                 </div>
diff --git a/front/src/templates/network.html b/front/src/templates/network.html
index b7338ac0..4c872a0b 100644
--- a/front/src/templates/network.html
+++ b/front/src/templates/network.html
@@ -25,18 +25,14 @@
                     <img src="{{ url_for('static', filename='/images/logo.png') }}" class="position-absolute start-0 top-0" width="170" style="margin: 17px;" alt="Miminet">
                 </a>
                 <div class="ws-name-case position-absolute top-0 start-50 translate-middle-x" style="margin-top: 17px;">
-                     {% if request.path != url_for('web_network_shared') %}
+                     {% if not is_shared %}
                         <a class="d-inline nav-link" href="{{ url_for('home') }}">Мои сети</a>
                         <a class="d-inline nav-link" href="#"> / </a>
                      {% endif %}
                         <a class="d-inline nav-link" id="network_title_head" href="{{ url_for('web_network', guid=network.guid) }}">{{ network.title }}</a>
                 </div>
                 <div class="d-flex position-absolute end-0 top-0" style="margin: 17px;">
-                     <a {% if request.path != url_for('web_network_shared') %}
-                            class="ws-settings-button"
-                        {% else %}
-                            class="ws-settings-button disabled"
-                        {% endif %}
+                     <a class="ws-settings-button"
                         href="#netConfigModal"
                         data-bs-toggle="modal"
                         data-target="#netConfigModal"
@@ -66,7 +62,7 @@
                     <a class="btn btn-outline-primary btn-icon me-4" data-target="#ModalCopy" id="copy-network" data-toggle="tooltip" data-bs-placement="bottom" title="Сохранить копию" onclick="CopyNetwork()">
                         <i class='bx bx-copy fs-4 mx-1'></i>
                     </a>
-                    <a {% if request.path != url_for('web_network_shared') %} class="btn btn-outline-primary btn-icon" {% else %} class="btn btn-outline-primary btn-icon disabled" {% endif %} href="#netConfigModal" id="net-settings" data-bs-toggle="modal" data-target="#netConfigModal" data-toggle="tooltip" data-bs-placement="bottom" title="Настройки сети"><i class='bx bx-cog fs-4 mx-1'></i></a>
+                    <a class="btn btn-outline-primary btn-icon" href="#netConfigModal" id="net-settings" data-bs-toggle="modal" data-target="#netConfigModal" data-toggle="tooltip" data-bs-placement="bottom" title="Настройки сети"><i class='bx bx-cog fs-4 mx-1'></i></a>
                 </div>
             {% else %}
                  <a href="/">
@@ -187,4 +183,4 @@
     DrawGraph();
 </script>
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/front/src/templates/network_shared.html b/front/src/templates/network_shared.html
index 7c319b1d..234233d7 100644
--- a/front/src/templates/network_shared.html
+++ b/front/src/templates/network_shared.html
@@ -25,18 +25,14 @@
                     <img src="{{ url_for('static', filename='/images/logo.png') }}" class="position-absolute start-0 top-0" width="170" style="margin: 17px;" alt="Miminet">
                 </a>
                 <div class="ws-name-case position-absolute top-0 start-50 translate-middle-x" style="margin-top: 17px;">
-                     {% if request.path != url_for('web_network_shared') %}
+                     {% if not is_shared %}
                         <a class="d-inline nav-link" href="{{ url_for('home') }}">Мои сети</a>
                         <a class="d-inline nav-link" href="#"> / </a>
                      {% endif %}
                         <a class="d-inline nav-link" id="network_title_head" href="{{ url_for('web_network', guid=network.guid) }}">{{ network.title }}</a>
                 </div>
                 <div class="d-flex position-absolute end-0 top-0" style="margin: 17px;">
-                     <a {% if request.path != url_for('web_network_shared') %}
-                            class="ws-settings-button"
-                        {% else %}
-                            class="ws-settings-button disabled"
-                        {% endif %}
+                     <a class="ws-settings-button"
                         href="#netConfigModal"
                         data-bs-toggle="modal"
                         data-target="#netConfigModal"
@@ -66,7 +62,7 @@
                     <a class="btn btn-outline-primary btn-icon me-4" data-target="#ModalCopy" id="copy-network" data-toggle="tooltip" data-bs-placement="bottom" title="Сохранить копию" onclick="CopyNetwork()">
                         <i class='bx bx-copy fs-4 mx-1'></i>
                     </a>
-                    <a {% if request.path != url_for('web_network_shared') %} class="btn btn-outline-primary btn-icon" {% else %} class="btn btn-outline-primary btn-icon disabled" {% endif %} href="#netConfigModal" id="net-settings" data-bs-toggle="modal" data-target="#netConfigModal" data-toggle="tooltip" data-bs-placement="bottom" title="Настройки сети"><i class='bx bx-cog fs-4 mx-1'></i></a>
+                    <a class="btn btn-outline-primary btn-icon" href="#netConfigModal" id="net-settings" data-bs-toggle="modal" data-target="#netConfigModal" data-toggle="tooltip" data-bs-placement="bottom" title="Настройки сети"><i class='bx bx-cog fs-4 mx-1'></i></a>
                 </div>
             {% else %}
                  <a href="/">
@@ -141,4 +137,4 @@
     DrawSharedGraph(nodes, edges);
 </script>
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}

From 940427207a82041d9d7de40955f7d2a51b9ff3fa Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Sat, 8 Nov 2025 12:51:00 +0300
Subject: [PATCH 22/33] fix: fixed double disabling delete button for shared
 networks

---
 front/src/templates/base.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index 124b6d41..335a8b5b 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -147,8 +147,7 @@ <h6>Настройки анимации</h6>
                 </div>
                 <div class="modal-footer">
                     <button id="networkDeleteButton" type="button" data-toggle="modal"
-                        class="btn btn-danger{% if is_shared %} disabled{% endif %}"
-                        {% if is_shared %}disabled{% endif %}
+                        class="btn btn-danger" {{'disabled' if is_shared else ''}}
                         href="#deleteNetConfirmModal">
                         Удалить сеть
                     </button>

From 3b48471127e535a76e27d677faa046be486d9b9b Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Sat, 8 Nov 2025 13:23:51 +0300
Subject: [PATCH 23/33] refactor: remove is_shared variable & context processor
 for it

---
 front/src/app.py                        | 11 +----------
 front/src/templates/base.html           |  8 ++++----
 front/src/templates/network.html        |  2 +-
 front/src/templates/network_shared.html |  2 +-
 4 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/front/src/app.py b/front/src/app.py
index 054c88e7..243e9bc4 100644
--- a/front/src/app.py
+++ b/front/src/app.py
@@ -3,7 +3,7 @@
 from datetime import datetime
 from dotenv import load_dotenv
 
-from flask import Flask, make_response, render_template, request, has_request_context
+from flask import Flask, make_response, render_template
 from flask_admin import Admin
 from flask_login import current_user, login_required
 from flask_migrate import Migrate
@@ -219,15 +219,6 @@
     "/quiz/question/delete", methods=["DELETE"], view_func=delete_question_endpoint
 )
 
-
-@app.context_processor
-def inject_shared_flag():
-    if not has_request_context():
-        return {"is_shared": False}
-
-    return {"is_shared": request.endpoint == "web_network_shared"}
-
-
 app.add_url_rule(
     "/quiz/question/all", methods=["GET"], view_func=get_questions_by_section_endpoint
 )
diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index 335a8b5b..be95266b 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -47,7 +47,7 @@
         {% if network %}
             {% if current_user.is_authenticated %}
                 <div class="mx-auto navbar-nav">
-                    {% if not is_shared %}
+                    {% if request.path != url_for('web_network_shared') %}
                     <a class="d-inline nav-link" href="{{ url_for('home') }}">Мои сети</a>
                     <a class="d-inline nav-link" href="#"> / </a>
                     {% endif %}
@@ -128,10 +128,10 @@ <h5 class="modal-title" id="netConfigModalLabel">Настройки сети</h5
                     <form id="networkConfigrationForm" method="POST" action="">
                         <div class="form-group">
                             <label for="network_title" class="text-sm">Название сети</label>
-                            <input type="text" class="form-control form-control-sm" id="network_title" name="network_title" value='{{ network.title }}' {{ 'disabled' if is_shared else '' }}>
+                            <input type="text" class="form-control form-control-sm" id="network_title" name="network_title" value='{{ network.title }}' {{ 'disabled' if request.path == url_for('web_network_shared') else '' }}>
 
                             <label for="network_description" class="text-sm pt-2">Описание сети</label>
-                            <textarea rows="3" class="form-control form-control-sm" id="network_description" name="network_description" {{ 'disabled' if is_shared else '' }}>{{ network.description }}</textarea>
+                            <textarea rows="3" class="form-control form-control-sm" id="network_description" name="network_description" {{ 'disabled' if request.path == url_for('web_network_shared') else '' }}>{{ network.description }}</textarea>
                         </div>
                             <hr class="my-3">
                             <h6>Настройки анимации</h6>
@@ -147,7 +147,7 @@ <h6>Настройки анимации</h6>
                 </div>
                 <div class="modal-footer">
                     <button id="networkDeleteButton" type="button" data-toggle="modal"
-                        class="btn btn-danger" {{'disabled' if is_shared else ''}}
+                        class="btn btn-danger" {{'disabled' if request.path == url_for('web_network_shared') else ''}}
                         href="#deleteNetConfirmModal">
                         Удалить сеть
                     </button>
diff --git a/front/src/templates/network.html b/front/src/templates/network.html
index 4c872a0b..195b969d 100644
--- a/front/src/templates/network.html
+++ b/front/src/templates/network.html
@@ -25,7 +25,7 @@
                     <img src="{{ url_for('static', filename='/images/logo.png') }}" class="position-absolute start-0 top-0" width="170" style="margin: 17px;" alt="Miminet">
                 </a>
                 <div class="ws-name-case position-absolute top-0 start-50 translate-middle-x" style="margin-top: 17px;">
-                     {% if not is_shared %}
+                     {% if request.path != url_for('web_network_shared') %}
                         <a class="d-inline nav-link" href="{{ url_for('home') }}">Мои сети</a>
                         <a class="d-inline nav-link" href="#"> / </a>
                      {% endif %}
diff --git a/front/src/templates/network_shared.html b/front/src/templates/network_shared.html
index 234233d7..8c7cf9e8 100644
--- a/front/src/templates/network_shared.html
+++ b/front/src/templates/network_shared.html
@@ -25,7 +25,7 @@
                     <img src="{{ url_for('static', filename='/images/logo.png') }}" class="position-absolute start-0 top-0" width="170" style="margin: 17px;" alt="Miminet">
                 </a>
                 <div class="ws-name-case position-absolute top-0 start-50 translate-middle-x" style="margin-top: 17px;">
-                     {% if not is_shared %}
+                     {% if request.path != url_for('web_network_shared') %}
                         <a class="d-inline nav-link" href="{{ url_for('home') }}">Мои сети</a>
                         <a class="d-inline nav-link" href="#"> / </a>
                      {% endif %}

From c31bfd09f06b1c991de9a8d524719f0df3201608 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Mon, 17 Nov 2025 09:24:05 +0300
Subject: [PATCH 24/33] style: revover netfront_f.js style

---
 front/src/static/netfront_f.js | 3770 ++++++++++++++++----------------
 1 file changed, 1899 insertions(+), 1871 deletions(-)

diff --git a/front/src/static/netfront_f.js b/front/src/static/netfront_f.js
index 6f86c54d..48daadf8 100644
--- a/front/src/static/netfront_f.js
+++ b/front/src/static/netfront_f.js
@@ -6,2247 +6,2275 @@ let NetworkCache = [];
 
 let packets_not_filtered = null;
 let filterState = {
-  hideARP: false,
-  hideSTP: false,
+    hideARP: false,
+    hideSTP: false,
 };
 
-const uid = function () {
-  return Date.now().toString(36) + Math.random().toString(36).substr(2);
-};
+const uid = function(){
+    return Date.now().toString(36) + Math.random().toString(36).substr(2);
+}
+
+const HostUid = function(){
 
-const HostUid = function () {
-  let host_name = "host_";
+    let host_name = "host_";
 
-  for (let host_number = 1; host_number < 100; host_number++) {
-    host = host_name + host_number;
+    for (let host_number = 1; host_number < 100; host_number++) {
+        host = host_name + host_number;
 
-    t = nodes.find((t) => t.data.id === host);
+        t = nodes.find(t => t.data.id === host);
 
-    if (!t) {
-      return host;
+        if (!t)
+        {
+            return host;
+        }
     }
-  }
 
-  return "host_" + uid();
-};
+    return "host_" + uid();
+}
 
-const RouterUid = function () {
-  let host_name = "router_";
+const RouterUid = function(){
 
-  for (let host_number = 1; host_number < 100; host_number++) {
-    host = host_name + host_number;
+    let host_name = "router_";
 
-    t = nodes.find((t) => t.data.id === host);
+    for (let host_number = 1; host_number < 100; host_number++) {
+        host = host_name + host_number;
 
-    if (!t) {
-      return host;
+        t = nodes.find(t => t.data.id === host);
+
+        if (!t)
+        {
+            return host;
+        }
     }
-  }
 
-  return "router_" + uid();
-};
+    return "router_" + uid();
+}
+
+const ServerUid = function(){
 
-const ServerUid = function () {
-  let host_name = "server_";
+    let host_name = "server_";
 
-  for (let host_number = 1; host_number < 100; host_number++) {
-    host = host_name + host_number;
+    for (let host_number = 1; host_number < 100; host_number++) {
+        host = host_name + host_number;
 
-    let t = nodes.find((t) => t.data.id === host);
+        let t = nodes.find(t => t.data.id === host);
 
-    if (!t) {
-      return host;
+        if (!t)
+        {
+            return host;
+        }
     }
-  }
 
-  return "server_" + uid();
-};
+    return "server_" + uid();
+}
 
 const ActionWithInterface = function (n, i, fun) {
-  let iface_id = n.interface[i].id;
-
-  if (!iface_id) {
-    return;
-  }
 
-  let connect_id = n.interface[i].connect;
+    let iface_id = n.interface[i].id;
 
-  if (!connect_id) {
-    return;
-  }
+    if (!iface_id){
+        return;
+    }
 
-  let edge = edges.find((e) => e.data.id === connect_id);
+    let connect_id = n.interface[i].connect;
 
-  if (!edge) {
-    return;
-  }
+    if (!connect_id){
+        return;
+    }
 
-  let source_host = edge.data.source;
-  let target_host = edge.data.target;
+    let edge = edges.find(e => e.data.id === connect_id);
 
-  if (!source_host || !target_host) {
-    return;
-  }
+    if (!edge){
+        return;
+    }
 
-  let connected_to = target_host;
-  if (n.data.id === target_host) {
-    connected_to = source_host;
-  }
+    let source_host = edge.data.source;
+    let target_host = edge.data.target;
 
-  let connected_to_host = nodes.find((n) => n.data.id === connected_to);
-  let connected_to_host_label = "Unknown";
+    if (!source_host || !target_host){
+        return;
+    }
 
-  if (connected_to_host) {
-    connected_to_host_label = connected_to_host.data.label;
-  }
+    let connected_to = target_host;
+    if (n.data.id === target_host){
+        connected_to = source_host;
+    }
 
-  ip_addr = n.interface[i].ip;
+    let connected_to_host = nodes.find(n => n.data.id === connected_to);
+    let connected_to_host_label = "Unknown";
 
-  if (!ip_addr) {
-    ip_addr = "";
-  }
+    if (connected_to_host){
+        connected_to_host_label = connected_to_host.data.label;
+    }
 
-  netmask = n.interface[i].netmask;
+    ip_addr = n.interface[i].ip;
 
-  if (!netmask) {
-    netmask = "";
-  }
+    if (!ip_addr){
+        ip_addr = '';
+    }
 
-  fun(iface_id, ip_addr, netmask, connected_to_host_label);
-};
+    netmask = n.interface[i].netmask;
 
-const ShowHostConfig = function (n, shared = 0) {
-  let hostname = n.config.label;
-  hostname = hostname || n.data.id;
+    if (!netmask){
+        netmask = '';
+    }
 
-  // Create form
-  if (shared) {
-    SharedConfigHostForm(n.data.id);
-  } else {
-    ConfigHostForm(n.data.id);
-  }
+    fun(iface_id, ip_addr, netmask, connected_to_host_label);
 
-  // Add hostname
-  ConfigHostName(hostname);
+}
 
-  // Add jobs
-  let host_jobs = [];
+const ShowHostConfig = function(n, shared = 0){
 
-  if (jobs) {
-    host_jobs = jobs.filter((j) => j.host_id === n.data.id);
-  }
+    let hostname = n.config.label;
+    hostname = hostname || n.data.id;
 
-  ConfigHostJob(host_jobs, shared);
+    // Create form
+    if (shared){
+        SharedConfigHostForm(n.data.id);
+    } else {
+        ConfigHostForm(n.data.id);
+    }
 
-  // Add interfaces
-  $.each(n.interface, function (i) {
-    ActionWithInterface(n, i, ConfigHostInterface);
-  });
+    // Add hostname
+    ConfigHostName(hostname);
 
-  if (n.interface.length) {
-    let default_gw = "";
+    // Add jobs
+    let host_jobs = [];
 
-    if ("default_gw" in n.config) {
-      default_gw = n.config.default_gw;
+    if (jobs){
+        host_jobs = jobs.filter(j => j.host_id === n.data.id);
     }
 
-    ConfigHostGateway(default_gw);
-  }
+    ConfigHostJob(host_jobs, shared);
 
-  if (shared) {
-    DisableFormInputs();
-  }
-};
-
-const ShowRouterConfig = function (n, shared = 0) {
-  let hostname = n.config.label;
-  hostname = hostname || n.data.id;
-
-  // Create form
-  if (shared) {
-    SharedConfigRouterForm(n.data.id);
-  } else {
-    ConfigRouterForm(n.data.id);
-  }
+    // Add interfaces
+    $.each(n.interface, function(i) {
+        ActionWithInterface(n, i, ConfigHostInterface)
+    });
 
-  // Add hostname
-  ConfigRouterName(hostname);
+    if(n.interface.length)
+    {
+        let default_gw = '';
 
-  // Add jobs
-  let router_jobs = [];
+        if ("default_gw" in n.config){
+            default_gw = n.config.default_gw;
+        }
 
-  if (jobs) {
-    router_jobs = jobs.filter((j) => j.host_id === n.data.id);
-  }
+        ConfigHostGateway(default_gw);
+    }
 
-  ConfigRouterJob(router_jobs, shared);
+    if (shared){
+        DisableFormInputs();
+    }
+}
 
-  // Add interfaces
-  $.each(n.interface, function (i) {
-    ActionWithInterface(n, i, ConfigRouterInterface);
-  });
+const ShowRouterConfig = function(n, shared = 0){
 
-  if (n.interface.length) {
-    let default_gw = "";
+    let hostname = n.config.label;
+    hostname = hostname || n.data.id;
 
-    if ("default_gw" in n.config) {
-      default_gw = n.config.default_gw;
+    // Create form
+    if (shared){
+        SharedConfigRouterForm(n.data.id)
+    } else {
+        ConfigRouterForm(n.data.id);
     }
 
-    ConfigRouterGateway(default_gw);
-  }
+    // Add hostname
+    ConfigRouterName(hostname);
 
-  ConfigVxlan(n);
+    // Add jobs
+    let router_jobs = [];
 
-  if (shared) {
-    DisableFormInputs();
-    DisableVXLANInputs(n);
-  }
-};
+    if (jobs){
+        router_jobs = jobs.filter(j => j.host_id === n.data.id);
+    }
 
-const ShowServerConfig = function (n, shared = 0) {
-  let hostname = n.config.label;
-  hostname = hostname || n.data.id;
+    ConfigRouterJob(router_jobs, shared);
 
-  // Create form
-  if (shared) {
-    SharedConfigServerForm(n.data.id);
-  } else {
-    ConfigServerForm(n.data.id);
-  }
+    // Add interfaces
+    $.each(n.interface, function (i) {
+        ActionWithInterface(n, i, ConfigRouterInterface)
+    });
 
-  // Add hostname
-  ConfigServerName(hostname);
+    if(n.interface.length)
+    {
+        let default_gw = '';
 
-  // Add jobs
-  let host_jobs = [];
+        if ("default_gw" in n.config){
+            default_gw = n.config.default_gw;
+        }
 
-  if (jobs) {
-    host_jobs = jobs.filter((j) => j.host_id === n.data.id);
-  }
+        ConfigRouterGateway(default_gw);
+    }
 
-  ConfigServerJob(host_jobs, shared);
+    ConfigVxlan(n);
 
-  // Add interfaces
-  $.each(n.interface, function (i) {
-    ActionWithInterface(n, i, ConfigServerInterface);
-  });
+    if (shared){
+        DisableFormInputs();
+        DisableVXLANInputs(n);
+    }
+}
+
+const ShowServerConfig = function(n, shared = 0){
 
-  if (n.interface.length) {
-    let default_gw = "";
+    let hostname = n.config.label;
+    hostname = hostname || n.data.id;
 
-    if ("default_gw" in n.config) {
-      default_gw = n.config.default_gw;
+    // Create form
+    if (shared){
+        SharedConfigServerForm(n.data.id);
+    } else {
+        ConfigServerForm(n.data.id);
     }
 
-    ConfigServerGateway(default_gw);
-  }
+    // Add hostname
+    ConfigServerName(hostname);
 
-  if (shared) {
-    DisableFormInputs();
-  }
-};
+    // Add jobs
+    let host_jobs = [];
 
-const ShowHubConfig = function (n, shared = 0) {
-  let hostname = n.config.label;
-  hostname = hostname || n.data.id;
+    if (jobs){
+        host_jobs = jobs.filter(j => j.host_id === n.data.id);
+    }
 
-  // Create form
-  if (shared) {
-    SharedConfigHubForm(n.data.id);
-  } else {
-    ConfigHubForm(n.data.id);
-  }
+    ConfigServerJob(host_jobs, shared);
 
-  // Add hostname
-  ConfigHubName(hostname);
+    // Add interfaces
+    $.each(n.interface, function (i) {
+        ActionWithInterface(n, i, ConfigServerInterface)
+    });
 
-  // Add interfaces
-  $.each(n.interface, function (i) {
-    ActionWithInterface(n, i, ConfigHubInterface);
-  });
+    if(n.interface.length)
+    {
+        let default_gw = '';
 
-  if (n.interface.length) {
-    ConfigHubIndent();
-  }
+        if ("default_gw" in n.config){
+            default_gw = n.config.default_gw;
+        }
 
-  if (shared) {
-    DisableFormInputs();
-  }
-};
+        ConfigServerGateway(default_gw);
+    }
 
-const ShowSwitchConfig = function (n, shared = 0) {
-  let hostname = n.config.label;
-  hostname = hostname || n.data.id;
+    if (shared){
+        DisableFormInputs();
+    }
+}
 
-  // Create form
-  if (shared) {
-    SharedConfigSwitchForm(n.data.id);
-  } else {
-    ConfigSwitchForm(n.data.id);
-  }
+const ShowHubConfig = function(n, shared = 0){
 
-  // Add hostname
-  ConfigSwitchName(hostname);
+    let hostname = n.config.label;
+    hostname = hostname || n.data.id;
 
-  //Add checkbox STP
-  //    ConfigSwtichSTP(n.config.stp);
+    // Create form
+    if (shared){
+        SharedConfigHubForm(n.data.id);
+    } else {
+        ConfigHubForm(n.data.id);
+    }
 
-  //Add checkbox RSTP
-  //    ConfigSwtichRSTP(n.config.rstp);
-  ConfigRSTP(n);
+    // Add hostname
+    ConfigHubName(hostname);
 
-  // Add VLAN
-  ConfigVLAN(n);
+    // Add interfaces
+    $.each(n.interface, function (i) {
+        ActionWithInterface(n, i, ConfigHubInterface)
+    });
 
-  // Add interfaces
-  $.each(n.interface, function (i) {
-    ActionWithInterface(n, i, ConfigSwitchInterface);
-  });
+    if(n.interface.length){
+        ConfigHubIndent();
+    }
 
-  if (n.interface.length) {
-    ConfigSwitchIndent();
-  }
+    if (shared){
+        DisableFormInputs();
+    }
+}
 
-  if (shared) {
-    DisableFormInputs();
-    DisableVLANInputs(n);
-  }
-};
+const ShowSwitchConfig = function(n, shared = 0){
 
-const ShowEdgeConfig = function (edge_id, shared = 0) {
-  let ed = edges.find((ed) => ed.data.id === edge_id);
+    let hostname = n.config.label;
+    hostname = hostname || n.data.id;
 
-  if (!ed) {
-    return;
-  }
+    // Create form
+    if (shared){
+        SharedConfigSwitchForm(n.data.id);
+    } else {
+        ConfigSwitchForm(n.data.id);
+    }
 
-  let edge_source = ed.data.source;
-  let edge_target = ed.data.target;
-  let edge_loss = ed.data.loss_percentage || 0;
+    // Add hostname
+    ConfigSwitchName(hostname);
 
-  // Create form
-  if (shared) {
-    SharedConfigEdgeForm(edge_id);
-  } else {
-    ConfigEdgeForm(edge_id);
-  }
+    //Add checkbox STP
+//    ConfigSwtichSTP(n.config.stp);
 
-  // Add loss percentage info
-  ConfigEdgePercentage(edge_loss);
+    //Add checkbox RSTP
+//    ConfigSwtichRSTP(n.config.rstp);
+    ConfigRSTP(n);
 
-  // Add source and target info
-  ConfigEdgeEndpoints(edge_source, edge_target);
+    // Add VLAN
+    ConfigVLAN(n);
 
-  if (shared) {
-    DisableFormInputs();
-  }
-};
+    // Add interfaces
+    $.each(n.interface, function (i) {
+        ActionWithInterface(n, i, ConfigSwitchInterface)
+    });
 
-const PacketUid = function () {
-  return "pkt_" + uid();
-};
+    if(n.interface.length){
+        ConfigSwitchIndent();
+    }
 
-const l1HubUid = function () {
-  let hub_name = "l1hub";
+    if (shared){
+        DisableFormInputs();
+        DisableVLANInputs(n);
+    }
+}
 
-  for (let hub_number = 1; hub_number < 100; hub_number++) {
-    hub = hub_name + hub_number;
+const ShowEdgeConfig = function(edge_id, shared = 0){
 
-    t = nodes.find((t) => t.data.id === hub);
+    let ed = edges.find(ed => ed.data.id === edge_id);
 
-    if (!t) {
-      return hub;
+    if (!ed){
+        return;
     }
-  }
 
-  return "hub_" + uid();
-};
+    let edge_source = ed.data.source;
+    let edge_target = ed.data.target;
+    let edge_loss = ed.data.loss_percentage || 0
+
+    // Create form
+    if (shared){
+        SharedConfigEdgeForm(edge_id);
+    } else {
+        ConfigEdgeForm(edge_id);
+    }
 
-const l2SwitchUid = function () {
-  let sw_name = "l2sw";
 
-  for (let sw_number = 1; sw_number < 100; sw_number++) {
-    sw = sw_name + sw_number;
+    // Add loss percentage info
+    ConfigEdgePercentage(edge_loss)
 
-    t = nodes.find((t) => t.data.id === sw);
+    // Add source and target info
+    ConfigEdgeEndpoints(edge_source, edge_target);
 
-    if (!t) {
-      return sw;
+    if (shared){
+        DisableFormInputs();
     }
-  }
+}
 
-  return "sw_" + uid();
-};
+const PacketUid = function(){
+    return "pkt_" + uid();
+}
 
-const l2SwitchPortUid = function (switch_id) {
-  let t = nodes.find((t) => t.data.id === switch_id);
+const l1HubUid = function(){
 
-  if (!t) {
-    return -1;
-  }
+    let hub_name = "l1hub";
 
-  for (let port_number = 1; port_number < 128; port_number++) {
-    port = t.data.id + "_" + port_number;
+    for (let hub_number = 1; hub_number < 100; hub_number++) {
+        hub = hub_name + hub_number;
 
-    let i = t.interface.find((i) => i.id === port);
+        t = nodes.find(t => t.data.id === hub);
 
-    if (!i) {
-      return port;
+        if (!t)
+        {
+            return hub;
+        }
     }
-  }
-};
 
-const l1HubPortUid = function (hub_id) {
-  let t = nodes.find((t) => t.data.id === hub_id);
+    return "hub_" + uid();
+}
+
+const l2SwitchUid = function(){
 
-  if (!t) {
-    return -1;
-  }
+    let sw_name = "l2sw";
 
-  for (let port_number = 1; port_number < 128; port_number++) {
-    port = t.data.id + "_" + port_number;
+    for (let sw_number = 1; sw_number < 100; sw_number++) {
+        sw = sw_name + sw_number;
 
-    let i = t.interface.find((i) => i.id === port);
+        t = nodes.find(t => t.data.id === sw);
 
-    if (!i) {
-      return port;
+        if (!t)
+        {
+            return sw;
+        }
     }
-  }
-};
 
-const EdgeUid = function () {
-  return "edge_" + uid();
-};
+    return "sw_" + uid();
+}
 
-const InterfaceUid = function () {
-  return "iface_" + Math.random().toString(9).substring(2, 10);
-};
+const l2SwitchPortUid = function(switch_id){
 
-const PostNodesEdges = function () {
-  $.ajax({
-    type: "POST",
-    url: "/post_nodes_edges?guid=" + network_guid,
-    data: JSON.stringify([nodes, edges]),
-    success: function (data) {},
-    error: function (err) {
-      console.log("Cannot post edges to server");
-    },
-    contentType: "application/json",
-    dataType: "json",
-  });
-};
+    let t = nodes.find(t => t.data.id === switch_id);
 
-const AddEdge = function (source_id, target_id) {
-  let source_node = nodes.find((n) => n.data.id === source_id);
-  let target_node = nodes.find((n) => n.data.id === target_id);
+    if (!t)
+    {
+        return -1;
+    }
 
-  // Do we find nodes?
-  if (!source_node || !target_node) {
-    return;
-  }
-
-  // Save the network state.
-  SaveNetworkObject();
-
-  // Add edge
-  let edge_id = EdgeUid();
-
-  edges.push({
-    data: {
-      id: edge_id,
-      source: source_node.data.id,
-      target: target_node.data.id,
-    },
-  });
-
-  // Add interface If edge connects to host or to router or to server
-  if (
-    source_node.config.type === "host" ||
-    source_node.config.type === "router" ||
-    source_node.config.type === "server"
-  ) {
-    let iface_id = InterfaceUid();
-    source_node.interface.push({
-      id: iface_id,
-      name: iface_id,
-      connect: edge_id,
-    });
-  }
-
-  if (
-    target_node.config.type === "host" ||
-    target_node.config.type === "router" ||
-    target_node.config.type === "server"
-  ) {
-    let iface_id = InterfaceUid();
-    target_node.interface.push({
-      id: iface_id,
-      name: iface_id,
-      connect: edge_id,
-    });
-  }
+    for (let port_number = 1; port_number < 128; port_number++) {
+        port = t.data.id + "_" + port_number;
 
-  // Add interface if connected to switch
-  if (target_node.config.type === "l2_switch") {
-    var vlan = null;
-    var type_connection = null;
+        let i = t.interface.find(i => i.id === port);
 
-    if (areInterfaceFieldsFilled(target_node)) {
-      vlan = 1;
-      type_connection = 0;
+        if (!i){
+            return port;
+        }
     }
+}
 
-    let iface_id = l2SwitchPortUid(target_node.data.id);
-    target_node.interface.push({
-      id: iface_id,
-      name: iface_id,
-      connect: edge_id,
-      vlan: vlan,
-      type_connection: type_connection,
-    });
-  }
+const l1HubPortUid = function(hub_id){
 
-  if (source_node.config.type === "l2_switch") {
-    var vlan = null;
-    var type_connection = null;
+    let t = nodes.find(t => t.data.id === hub_id);
 
-    if (areInterfaceFieldsFilled(source_node)) {
-      vlan = 1;
-      type_connection = 0;
+    if (!t)
+    {
+        return -1;
     }
 
-    let iface_id = l2SwitchPortUid(source_node.data.id);
-    source_node.interface.push({
-      id: iface_id,
-      name: iface_id,
-      connect: edge_id,
-      vlan: vlan,
-      type_connection: type_connection,
-    });
-  }
-
-  // Add interface if connected to Hub
-  if (target_node.config.type === "l1_hub") {
-    let iface_id = l1HubPortUid(target_node.data.id);
-    target_node.interface.push({
-      id: iface_id,
-      name: iface_id,
-      connect: edge_id,
-    });
-  }
-
-  if (source_node.config.type === "l1_hub") {
-    let iface_id = l1HubPortUid(source_node.data.id);
-    source_node.interface.push({
-      id: iface_id,
-      name: iface_id,
-      connect: edge_id,
-    });
-  }
-};
+    for (let port_number = 1; port_number < 128; port_number++) {
+        port = t.data.id + "_" + port_number;
 
-const DeleteJob = function (node_id) {
-  let jobs_to_delete = [];
+        let i = t.interface.find(i => i.id === port);
 
-  $.each(jobs, function (idx, job) {
-    if (!job) {
-      return;
+        if (!i){
+            return port;
+        }
     }
+}
+
+const EdgeUid = function(){
+    return "edge_" + uid();
+}
+
+const InterfaceUid = function(){
+    return "iface_" + Math.random().toString(9).substring(2, 10);
+}
+
+const PostNodesEdges = function(){
+    $.ajax({
+        type: 'POST',
+        url: '/post_nodes_edges?guid=' + network_guid,
+        data: JSON.stringify([nodes, edges]),
+        success: function(data) {},
+        error: function(err) {console.log('Cannot post edges to server')},
+        contentType: "application/json",
+        dataType: 'json'
+    });
+}
 
-    if (job.host_id === node_id) {
-      jobs_to_delete.push(idx);
-    }
-  });
+const AddEdge = function(source_id, target_id){
 
-  $.each(jobs_to_delete, function (idx, val) {
-    jobs.splice(val, 1);
-  });
-};
+        let source_node = nodes.find(n => n.data.id === source_id);
+        let target_node = nodes.find(n => n.data.id === target_id);
 
-const DeleteNode = function (node_id) {
-  // Find node in nodes
-  let n = nodes.find((n) => n.data.id === node_id);
+        // Do we find nodes?
+        if (!source_node || !target_node)
+        {
+            return;
+        }
 
-  if (!n) {
-    return;
-  }
+        // Save the network state.
+        SaveNetworkObject();
 
-  let edges_to_delete = [];
+        // Add edge
+        let edge_id = EdgeUid();
 
-  // Find all edges that connected to the deleted node
-  $.each(edges, function (idx, edge) {
-    if (!edge) {
-      return;
-    }
+        edges.push({
+            data: {
+                id: edge_id,
+                source: source_node.data.id,
+                target: target_node.data.id,
+            }
+        });
 
-    // Find the edge
-    if (edge.data.source === node_id) {
-      // Find the node on the other side
-      let t = nodes.find((t) => t.data.id === edge.data.target);
+        // Add interface If edge connects to host or to router or to server
+        if (source_node.config.type === 'host' || source_node.config.type === 'router' || source_node.config.type === 'server'){
+            let iface_id = InterfaceUid();
+            source_node.interface.push({
+                  id: iface_id,
+                  name: iface_id,
+                  connect: edge_id,
+            });
+        }
 
-      if (!t) {
-        console.log("We have an edge without target node");
-        return;
-      }
+        if (target_node.config.type === 'host' || target_node.config.type === 'router' || target_node.config.type === 'server'){
+            let iface_id = InterfaceUid();
+            target_node.interface.push({
+                id: iface_id,
+                name: iface_id,
+                connect: edge_id,
+            });
+        }
 
-      // Iterate interface and delete one
-      let new_iface = t.interface.filter(function (iface) {
-        return iface.connect !== edge.data.id;
-      });
+        // Add interface if connected to switch
+        if (target_node.config.type === 'l2_switch'){
+            var vlan = null;
+            var type_connection = null;
+
+            if (areInterfaceFieldsFilled(target_node)) {
+                vlan = 1;
+                type_connection = 0;
+            }
+
+            let iface_id = l2SwitchPortUid(target_node.data.id);
+            target_node.interface.push({
+                id: iface_id,
+                name: iface_id,
+                connect: edge_id,
+                vlan: vlan,
+                type_connection: type_connection,
+            });
+        }
 
-      t.interface = new_iface;
-      edges_to_delete.unshift(idx);
-      return;
-    }
+        if (source_node.config.type === 'l2_switch'){
+            var vlan = null;
+            var type_connection = null;
+
+            if (areInterfaceFieldsFilled(source_node)) {
+                vlan = 1;
+                type_connection = 0;
+            }
+
+            let iface_id = l2SwitchPortUid(source_node.data.id);
+            source_node.interface.push({
+                id: iface_id,
+                name: iface_id,
+                connect: edge_id,
+                vlan: vlan,
+                type_connection: type_connection,
+            });
+        }
 
-    if (edge.data.target === node_id) {
-      // Find the node on the other side
-      let t = nodes.find((t) => t.data.id === edge.data.source);
+        // Add interface if connected to Hub
+        if (target_node.config.type === 'l1_hub'){
+            let iface_id = l1HubPortUid(target_node.data.id);
+            target_node.interface.push({
+                id: iface_id,
+                name: iface_id,
+                connect: edge_id,
+            });
+        }
 
-      if (!t) {
-        console.log("We have an edge without target node");
-        return;
-      }
+        if (source_node.config.type === 'l1_hub'){
+            let iface_id = l1HubPortUid(source_node.data.id);
+            source_node.interface.push({
+                id: iface_id,
+                name: iface_id,
+                connect: edge_id,
+            });
+        }
+}
 
-      // Iterate interface and delete one
-      let new_iface = t.interface.filter(function (iface) {
-        return iface.connect !== edge.data.id;
-      });
+const DeleteJob = function(node_id){
 
-      t.interface = new_iface;
-      edges_to_delete.unshift(idx);
-      return;
-    }
-  });
+    let jobs_to_delete = [];
 
-  $.each(edges_to_delete, function (idx, val) {
-    edges.splice(val, 1);
-  });
+    $.each(jobs , function(idx, job) {
 
-  // Delete the node
-  let node_index = nodes.findIndex((prop) => prop.data.id === node_id);
-  nodes.splice(node_index, 1);
-};
+        if (!job){
+            return;
+        }
 
-const DeleteEdge = function (edge_id) {
-  let ed = edges.find((ed) => ed.data.id === edge_id);
+        if (job.host_id === node_id){
+            jobs_to_delete.push(idx);
+        }
+    });
 
-  if (!ed) {
-    return;
-  }
+    $.each(jobs_to_delete, function (idx, val){
+        jobs.splice(val, 1);
+    });
+}
 
-  let connected_nodes = [ed.data.source, ed.data.target];
-  let iterator = connected_nodes.values();
+const DeleteNode = function(node_id) {
 
-  for (let node_id of iterator) {
-    let t = nodes.find((t) => t.data.id === node_id);
+    // Find node in nodes
+    let n = nodes.find(n => n.data.id === node_id);
 
-    if (!t) {
-      console.log("We have an edge without target node");
-      continue;
+    if (!n) {
+        return;
     }
 
-    // Iterate interface and delete one
-    let edge_node_iface = t.interface.filter(function (iface) {
-      return iface.connect !== edge_id;
-    });
+    let edges_to_delete = [];
 
-    t.interface = edge_node_iface;
-  }
+    // Find all edges that connected to the deleted node
+    $.each(edges , function(idx, edge) {
 
-  // Delete the edeg
-  let edge_index = edges.findIndex((prop) => prop.data.id === edge_id);
-  edges.splice(edge_index, 1);
-  return;
-};
+        if (!edge){
+            return;
+        }
 
-const PostNodes = function () {
-  $.ajax({
-    type: "POST",
-    url: "/post_network_nodes?guid=" + network_guid,
-    data: JSON.stringify(nodes),
-    success: function (data) {},
-    error: function (err) {
-      console.log("Cannot post nodes to server");
-    },
-    contentType: "application/json",
-    dataType: "json",
-  });
-};
+        // Find the edge
+        if (edge.data.source === node_id)
+        {
+            // Find the node on the other side
+            let t = nodes.find(t => t.data.id === edge.data.target);
+
+            if (!t){
+                console.log("We have an edge without target node");
+                return;
+            }
+
+            // Iterate interface and delete one
+            let new_iface = t.interface.filter(function( iface ) {
+                return iface.connect !== edge.data.id;
+            });
+
+            t.interface = new_iface;
+            edges_to_delete.unshift(idx);
+            return;
+        }
 
-const MoveNodes = function () {
-  $.ajax({
-    type: "POST",
-    url: "/move_network_nodes?guid=" + network_guid,
-    data: JSON.stringify(nodes),
-    success: function (data) {},
-    error: function (err) {
-      console.log("Cannot post nodes to server");
-    },
-    contentType: "application/json",
-    dataType: "json",
-  });
-};
+        if (edge.data.target === node_id)
+        {
+            // Find the node on the other side
+            let t = nodes.find(t => t.data.id === edge.data.source);
 
-const prepareStylesheet = function () {
-  const getColor = function (ele) {
-    if (ele.group() === "edges") {
-      const loss = ele.data("loss_percentage") || 0;
-      if (loss > 0) return "#FF8C00";
-    }
-    return ele.data("color") || "#9FBFE5";
-  };
-  const getEdgeLabel = function (ele) {
-    return ele.data("label") || "";
-  };
-  const getLineStyle = function (ele) {
-    return ele.data("line") || "solid";
-  };
-  const getCurveStyle = function (ele) {
-    return ele.data("style") || "bezier";
-  };
-  const getTextDirection = function (ele) {
-    return ele.data("direction") || "autorotate";
-  };
+            if (!t){
+                console.log("We have an edge without target node");
+                return;
+            }
 
-  const getNodeLabel = function (ele) {
-    let label = ele.data("label") || "";
-    let n = nodes.find((n) => n.data.id === ele.data("id"));
-
-    if (!n) {
-      return label;
-    }
+            // Iterate interface and delete one
+            let new_iface = t.interface.filter(function( iface ) {
+                return iface.connect !== edge.data.id;
+            });
 
-    $.each(n.interface, function (i) {
-      let ip_addr = n.interface[i].ip;
-      let netmask = n.interface[i].netmask;
+            t.interface = new_iface;
+            edges_to_delete.unshift(idx);
+            return;
+        }
 
-      if (!ip_addr || !netmask) {
-        return;
-      }
+    });
 
-      label = label + "\n" + ip_addr + "/" + netmask;
+    $.each(edges_to_delete, function (idx, val){
+        edges.splice(val, 1);
     });
 
-    if (n.config.default_gw) {
-      label = label + "\n" + "gw:" + n.config.default_gw;
-    }
+    // Delete the node
+    let node_index = nodes.findIndex(prop => prop.data.id === node_id);
+    nodes.splice(node_index,1);
+}
 
-    $.each(jobs, function (i) {
-      let j = jobs[i];
+const DeleteEdge = function (edge_id) {
 
-      if (j.host_id === n.data.id) {
-        label = label + "\n" + "(" + j.print_cmd + ")";
-      }
-    });
+    let ed = edges.find(ed => ed.data.id === edge_id);
 
-    return label;
-  };
+    if (!ed){
+        return;
+    }
 
-  let sheet = cytoscape
-    .stylesheet()
-    .selector("node")
-    .css({
-      height: 30,
-      width: 30,
-      "background-fit": "cover",
-      "border-color": "#000",
-      "border-width": 0,
-      content: getNodeLabel,
-      "text-valign": "top",
-      "text-align": "center",
-      "font-size": "8px",
-      "text-wrap": "wrap",
-    })
-    .selector("edge")
-    .css({
-      width: 2,
-      "target-arrow-shape": "none",
-      "line-color": getColor,
-      "target-arrow-color": getColor,
-      "curve-style": getCurveStyle,
-      label: getEdgeLabel,
-      "line-style": getLineStyle,
-      color: "#000",
-      "text-outline-color": "#FFF",
-      "text-outline-width": 1,
-      "edge-text-rotation": getTextDirection,
-    })
-    .selector(".eh-handle")
-    .css({
-      "background-color": "blue",
-      width: 8,
-      height: 8,
-      shape: "ellipse",
-      "overlay-opacity": 0,
-      "border-width": 4, // makes the handle easier to hit
-      "border-opacity": 0,
-    })
-
-    .selector(".eh-hover")
-    .css({
-      "background-color": "blue",
-    })
-
-    .selector(".eh-source")
-    .css({
-      "border-width": 2,
-      "border-color": "blue",
-    })
-
-    .selector(".eh-target")
-    .css({
-      "border-width": 2,
-      "border-color": "blue",
-    })
-
-    .selector(".eh-preview")
-    .css({
-      "background-color": "blue",
-      "line-color": "blue",
-      "target-arrow-color": "blue",
-      "source-arrow-color": "blue",
-    })
-
-    .selector(".eh-ghost-edge")
-    .css({
-      "background-color": "blue",
-      "line-color": "blue",
-      "target-arrow-color": "blue",
-      "source-arrow-color": "blue",
-    })
-
-    .selector("node[name]")
-    .css({
-      content: "data(name)",
-    })
-
-    .selector('node[type="packet"]')
-    .css({
-      content: "data(label)",
-      "text-valign": "top",
-      "text-align": "center",
-      height: "5px",
-      width: "5px",
-      "border-opacity": "0",
-      "border-width": "0px",
-      "text-wrap": "wrap",
-    })
-
-    .selector(".hidden")
-    .css({
-      display: "none",
-    })
-
-    .selector(".eh-ghost-edge.eh-preview-active")
-    .css({
-      opacity: 0,
-    });
+    let connected_nodes = [ed.data.source, ed.data.target];
+    let iterator = connected_nodes.values();
 
-  const appendIconClass = function (stylesheet, cssClass) {
-    return stylesheet.selector("." + cssClass).css({
-      "background-image": DiagramIcons[cssClass],
-      "background-opacity": 0,
-      "border-width": 0,
-      "background-clip": "none",
-    });
-  };
+    for (let node_id of iterator){
+        let t = nodes.find(t => t.data.id === node_id);
 
-  for (const prop in DiagramIcons) {
-    if (Object.prototype.hasOwnProperty.call(DiagramIcons, prop)) {
-      sheet = appendIconClass(sheet, prop);
+        if (!t){
+            console.log("We have an edge without target node");
+            continue;
+        }
+
+        // Iterate interface and delete one
+        let edge_node_iface = t.interface.filter(function( iface ) {
+            return iface.connect !== edge_id;
+        });
+
+        t.interface = edge_node_iface;
     }
-  }
 
-  return sheet;
-};
+    // Delete the edeg
+    let edge_index = edges.findIndex(prop => prop.data.id === edge_id);
+    edges.splice(edge_index,1);
+    return;
+}
+
+const PostNodes = function(){
+    $.ajax({
+        type: 'POST',
+        url: '/post_network_nodes?guid=' + network_guid,
+        data: JSON.stringify(nodes),
+        success: function(data) {},
+        error: function(err) {console.log('Cannot post nodes to server')},
+        contentType: "application/json",
+        dataType: 'json'
+    });
+}
+
+const MoveNodes = function(){
+
+    $.ajax({
+        type: 'POST',
+        url: '/move_network_nodes?guid=' + network_guid,
+        data: JSON.stringify(nodes),
+        success: function(data) {},
+        error: function(err) {console.log('Cannot post nodes to server')},
+        contentType: "application/json",
+        dataType: 'json'
+    });
+}
+
+const prepareStylesheet = function() {
+    const getColor = function(ele) {
+        if (ele.group() === "edges") {
+            const loss = ele.data('loss_percentage') || 0;
+            if (loss > 0)
+                return '#FF8C00';
+        }
+        return ele.data('color') || '#9FBFE5';
+    };
+    const getEdgeLabel = function(ele) {
+      return ele.data('label') || '';
+    };
+    const getLineStyle = function(ele) {
+      return ele.data('line') || 'solid';
+    };
+    const getCurveStyle = function(ele) {
+      return ele.data('style') || 'bezier';
+    };
+    const getTextDirection = function(ele) {
+      return ele.data('direction') || 'autorotate';
+    };
+
+    const getNodeLabel = function(ele) {
+
+        let label = ele.data('label') || '';
+        let n = nodes.find(n => n.data.id === ele.data('id'));
+
+        if (!n){
+            return label;
+        }
 
-const DrawGraph = function () {
-  // Do we already have one?
-  let cy = undefined;
+        $.each(n.interface, function (i) {
 
-  if (global_cy) {
-    cy = global_cy;
+            let ip_addr = n.interface[i].ip;
+            let netmask = n.interface[i].netmask;
 
-    var collection = cy.elements();
-    cy.remove(collection);
-    cy.autounselectify(true);
-    cy.add(nodes);
-    cy.add(edges);
-    cy.nodes().grabify();
-    global_eh.enable();
-    return;
-  }
-
-  cy = cytoscape({
-    container: document.getElementById("network_scheme"),
-    boxSelectionEnabled: true,
-    autounselectify: true,
-    style: prepareStylesheet(),
-    elements: [],
-    layout: "preset",
-    zoom: network_zoom,
-    pan: { x: network_pan_x, y: network_pan_y },
-    fit: true,
-  });
-
-  global_cy = cy;
-
-  // the default values of each option are outlined below:
-  let defaults = {
-    canConnect: function (sourceNode, targetNode) {
-      // whether an edge can be created between source and target
-      return !sourceNode.same(targetNode); // e.g. disallow loops
-    },
-
-    edgeParams: function (sourceNode, targetNode) {
-      // for edges between the specified source and target
-      // return element object to be passed to cy.add() for edge
-      return {};
-    },
-
-    hoverDelay: 150, // time spent hovering over a target node before it is considered selected
-    snap: true, // when enabled, the edge can be drawn by just moving close to a target node (can be confusing on compound graphs)
-    snapThreshold: 50, // the target node must be less than or equal to this many pixels away from the cursor/finger
-    snapFrequency: 15, // the number of times per second (Hz) that snap checks done (lower is less expensive)
-    noEdgeEventsInDraw: true, // set events:no to edges during draws, prevents mouseouts on compounds
-    disableBrowserGestures: true, // during an edge drawing gesture, disable browser gestures such as two-finger trackpad swipe and pinch-to-zoom
-  };
+            if (!ip_addr || !netmask){
+                return;
+            }
 
-  global_eh = cy.edgehandles(defaults);
+            label = label + '\n' + ip_addr + "/" + netmask;
+        }
+        );
 
-  cy.minZoom(0.5);
-  cy.maxZoom(2);
+        if (n.config.default_gw)
+        {
+            label = label + '\n' + 'gw:' + n.config.default_gw;
+        }
 
-  cy.add(nodes);
-  cy.add(edges);
+        $.each(jobs, function (i) {
+            let j = jobs[i];
 
-  // Changing zoom
-  cy.on("zoom", function (evt) {
-    if (NetworkUpdateTimeoutId >= 0) {
-      clearTimeout(NetworkUpdateTimeoutId);
-      NetworkUpdateTimeoutId = -1;
-    }
+            if (j.host_id === n.data.id){
+                label = label + '\n' + '(' + j.print_cmd + ')';
+            }
 
-    NetworkUpdateTimeoutId = setTimeout(UpdateNetworkConfig, 2000);
-  });
+        });
 
-  // Changing the pan
-  cy.on("pan", function (evt) {
-    if (NetworkUpdateTimeoutId >= 0) {
-      clearTimeout(NetworkUpdateTimeoutId);
-      NetworkUpdateTimeoutId = -1;
-    }
+        return label;
+    };
+
+    let sheet = cytoscape.stylesheet()
+        .selector('node')
+        .css({
+          'height': 30,
+          'width': 30,
+          'background-fit': 'cover',
+          'border-color': '#000',
+          'border-width': 0,
+          'content': getNodeLabel,
+          'text-valign': 'top',
+          'text-align': 'center',
+          'font-size': '8px',
+          'text-wrap': 'wrap'
+        })
+        .selector('edge')
+        .css({
+          'width': 2,
+          'target-arrow-shape': 'none',
+          'line-color': getColor,
+          'target-arrow-color': getColor,
+          'curve-style': getCurveStyle,
+          'label': getEdgeLabel,
+          'line-style': getLineStyle,
+          'color': '#000',
+          'text-outline-color': '#FFF',
+          'text-outline-width': 1,
+          'edge-text-rotation': getTextDirection,
+        })
+        .selector('.eh-handle')
+        .css({
+            'background-color': 'blue',
+            'width': 8,
+            'height': 8,
+            'shape': 'ellipse',
+            'overlay-opacity': 0,
+            'border-width': 4, // makes the handle easier to hit
+            'border-opacity': 0
+        })
+
+        .selector('.eh-hover')
+        .css({
+            'background-color': 'blue'
+        })
+
+        .selector('.eh-source')
+        .css({
+            'border-width': 2,
+            'border-color': 'blue'
+        })
+
+        .selector('.eh-target')
+        .css({
+            'border-width': 2,
+            'border-color': 'blue'
+        })
+
+        .selector('.eh-preview')
+        .css({
+            'background-color': 'blue',
+            'line-color': 'blue',
+            'target-arrow-color': 'blue',
+            'source-arrow-color': 'blue'
+        })
+
+        .selector('.eh-ghost-edge')
+        .css({
+            'background-color': 'blue',
+            'line-color': 'blue',
+            'target-arrow-color': 'blue',
+            'source-arrow-color': 'blue'
+        })
+
+        .selector('node[name]')
+        .css({
+            'content': 'data(name)'
+        })
+
+        .selector('node[type="packet"]')
+        .css({
+            'content': 'data(label)',
+            'text-valign': 'top',
+            'text-align': 'center',
+            'height': '5px',
+            'width': '5px',
+            'border-opacity': '0',
+            'border-width': '0px',
+            'text-wrap': 'wrap'
+        })
+
+        .selector('.hidden')
+        .css({
+            'display': 'none'
+        })
+
+        .selector('.eh-ghost-edge.eh-preview-active')
+        .css({
+            'opacity': 0
+        });
 
-    NetworkUpdateTimeoutId = setTimeout(UpdateNetworkConfig, 2000);
-  });
+    const appendIconClass = function(stylesheet, cssClass) {
+      return stylesheet.selector('.' + cssClass)
+          .css({
+            'background-image': DiagramIcons[cssClass],
+            'background-opacity': 0,
+            'border-width': 0,
+            'background-clip': 'none',
+          });
+    };
 
-  // Looking for a position changing
-  cy.on("dragfree", "node", function (evt) {
-    //let node_id = evt.target.id();
-    let n = nodes.find((n) => n.data.id === this.id());
+    for (const prop in DiagramIcons) {
 
-    if (!n) {
-      return;
+      if (Object.prototype.hasOwnProperty.call(DiagramIcons, prop)) {
+        sheet = appendIconClass(sheet, prop);
+      }
     }
 
-    n.position.x = this.position().x;
-    n.position.y = this.position().y;
+    return sheet;
+  };
 
-    MoveNodes();
-    TakeGraphPictureAndUpdate();
-  });
+const DrawGraph = function() {
 
-  // Click on object
-  cy.on("click", function (evt) {
-    let evtTarget = evt.target;
+    // Do we already have one?
+    let cy = undefined;
 
-    // Is this cy ?
-    if (evtTarget === cy) {
-      ClearConfigForm("");
-      selecteed_node_id = 0;
-      selected_edge_id = 0;
-      return;
-    }
+    if (global_cy)
+    {
+        cy = global_cy;
 
-    // Is this edge ?
-    if (evtTarget.group() === "edges") {
-      selected_edge_id = evtTarget.data().id;
-      ShowEdgeConfig(selected_edge_id);
-      selecteed_node_id = 0;
-      return;
+        var collection = cy.elements();
+        cy.remove(collection);
+        cy.autounselectify(true);
+        cy.add(nodes);
+        cy.add(edges);
+        cy.nodes().grabify();
+        global_eh.enable();
+        return;
     }
 
-    // Maybe host ?
-    var target_id = evt.target.id();
-    let n = nodes.find((n) => n.data.id === target_id);
+    cy = cytoscape({
+        container: document.getElementById("network_scheme"),
+        boxSelectionEnabled: true,
+        autounselectify: true,
+        style: prepareStylesheet(),
+        elements: [],
+        layout: 'preset',
+        zoom: network_zoom,
+        pan: { x: network_pan_x, y: network_pan_y },
+        fit: true,
+    });
 
-    if (!n) {
-      return;
-    }
+    global_cy = cy;
 
-    selecteed_node_id = n.data.id;
-    selected_edge_id = 0;
-
-    if (n.config.type === "host") {
-      ShowHostConfig(n);
-    } else if (n.config.type === "l1_hub") {
-      ShowHubConfig(n);
-    } else if (n.config.type === "l2_switch") {
-      ShowSwitchConfig(n);
-    } else if (n.config.type === "router") {
-      ShowRouterConfig(n);
-    } else if (n.config.type === "server") {
-      ShowServerConfig(n);
-    }
-  });
+    // the default values of each option are outlined below:
+    let defaults = {
+        canConnect: function( sourceNode, targetNode ){
 
-  // Add edge to the edges[] and then save it to the server.
-  cy.on("ehcomplete", (event, sourceNode, targetNode, addedEdge) => {
-    AddEdge(sourceNode._private.data.id, targetNode._private.data.id);
-    PostNodesEdges();
-    TakeGraphPictureAndUpdate();
+            // whether an edge can be created between source and target
+        return !sourceNode.same(targetNode); // e.g. disallow loops
+        },
 
-    SetNetworkPlayerState(-1);
-  });
+        edgeParams: function( sourceNode, targetNode ){
 
-  $(document).on("keyup", function (e) {
-    if (e.keyCode == 46 && selecteed_node_id) {
-      // Save the network state.
-      SaveNetworkObject();
+            // for edges between the specified source and target
+            // return element object to be passed to cy.add() for edge
+            return {};
+        },
 
-      DeleteNode(selecteed_node_id);
-      DeleteJob(selecteed_node_id);
+        hoverDelay: 150, // time spent hovering over a target node before it is considered selected
+        snap: true, // when enabled, the edge can be drawn by just moving close to a target node (can be confusing on compound graphs)
+        snapThreshold: 50, // the target node must be less than or equal to this many pixels away from the cursor/finger
+        snapFrequency: 15, // the number of times per second (Hz) that snap checks done (lower is less expensive)
+        noEdgeEventsInDraw: true, // set events:no to edges during draws, prevents mouseouts on compounds
+        disableBrowserGestures: true // during an edge drawing gesture, disable browser gestures such as two-finger trackpad swipe and pinch-to-zoom
+    };
 
-      ClearConfigForm("");
-      selecteed_node_id = 0;
-      selected_edge_id = 0;
+    global_eh = cy.edgehandles(defaults);
 
-      PostNodesEdges(); // Update network on server
-      cy.elements().remove();
-      cy.add(nodes);
-      cy.add(edges);
+    cy.minZoom(0.5);
+    cy.maxZoom(2);
 
-      TakeGraphPictureAndUpdate();
+    cy.add(nodes);
+    cy.add(edges);
 
-      // Reset network state
-      SetNetworkPlayerState(-1);
-    }
-    if (e.keyCode == 46 && selected_edge_id) {
-      // Save the network state.
-      SaveNetworkObject();
+    // Changing zoom
+    cy.on('zoom', function(evt){
 
-      DeleteEdge(selected_edge_id);
+        if (NetworkUpdateTimeoutId >= 0){
+            clearTimeout(NetworkUpdateTimeoutId);
+            NetworkUpdateTimeoutId = -1;
+        }
 
-      ClearConfigForm("");
-      selecteed_node_id = 0;
-      selected_edge_id = 0;
+        NetworkUpdateTimeoutId = setTimeout(UpdateNetworkConfig, 2000);
+    });
 
-      PostNodesEdges(); // Update network on server
-      cy.elements().remove();
-      cy.add(nodes);
-      cy.add(edges);
+    // Changing the pan
+    cy.on('pan', function(evt){
 
-      TakeGraphPictureAndUpdate();
+        if (NetworkUpdateTimeoutId >= 0){
+            clearTimeout(NetworkUpdateTimeoutId);
+            NetworkUpdateTimeoutId = -1;
+        }
 
-      // Reset network state
-      SetNetworkPlayerState(-1);
-    }
+        NetworkUpdateTimeoutId = setTimeout(UpdateNetworkConfig, 2000);
+    });
 
-    if (e.keyCode == 90 && e.ctrlKey) {
-      ClearConfigForm("");
-      selecteed_node_id = 0;
-      selected_edge_id = 0;
+    // Looking for a position changing
+    cy.on('dragfree', 'node', function(evt){
 
-      RestoreNetworkObject();
+        //let node_id = evt.target.id();
+        let n = nodes.find(n => n.data.id === this.id());
 
-      PostNodesEdges(); // Update network on server
-      cy.elements().remove();
-      cy.add(nodes);
-      cy.add(edges);
+        if (!n) {
+            return;
+        }
 
-      TakeGraphPictureAndUpdate();
+        n.position.x = this.position().x;
+        n.position.y = this.position().y;
 
-      // Reset network state
-      SetNetworkPlayerState(-1);
-    }
-  });
-};
+        MoveNodes();
+        TakeGraphPictureAndUpdate();
+    });
 
-const DrawGraphStatic = function (nodes, edges, shared = 0) {
-  // Do we already have one?
-  let cy = undefined;
+    // Click on object
+    cy.on('click', function (evt) {
 
-  let network_scheme_id = "network_scheme";
+        let evtTarget = evt.target;
 
-  if (shared) {
-    network_scheme_id = "network_scheme_shared";
-  }
+        // Is this cy ?
+        if (evtTarget === cy) {
+            ClearConfigForm('');
+            selecteed_node_id = 0;
+            selected_edge_id = 0;
+            return;
+        }
 
-  if (global_cy) {
-    cy = global_cy;
-    cy.elements().remove();
-  } else {
-    cy = cytoscape({
-      container: document.getElementById(network_scheme_id),
-      boxSelectionEnabled: true,
-      autounselectify: false,
-      style: prepareStylesheet(),
-      elements: [],
-      layout: "preset",
-      zoom: network_zoom,
-      pan: { x: network_pan_x, y: network_pan_y },
-      fit: true,
-    });
+        // Is this edge ?
+        if (evtTarget.group() === 'edges'){
+            selected_edge_id = evtTarget.data().id;
+            ShowEdgeConfig(selected_edge_id);
+            selecteed_node_id = 0;
+            return;
+        }
 
-    global_cy = cy;
-  }
-
-  // Turn off edges creation.
-  if (global_eh) {
-    global_eh.disable();
-  }
-
-  cy.autounselectify(false);
-  cy.add(nodes);
-  cy.add(edges);
-  cy.nodes().ungrabify();
-  return;
-};
+        // Maybe host ?
+        var target_id = evt.target.id();
+        let n = nodes.find(n => n.data.id === target_id);
 
-const DrawSharedGraph = function (nodes, edges) {
-  // Do we already have one?
-  let cy = undefined;
+        if (!n) {
+            return;
+        }
 
-  if (global_cy) {
-    cy = global_cy;
-    cy.elements().remove();
-  } else {
-    cy = cytoscape({
-      container: document.getElementById("network_scheme_shared"),
-      boxSelectionEnabled: true,
-      autounselectify: true,
-      style: prepareStylesheet(),
-      elements: [],
-      layout: "preset",
-      zoom: network_zoom,
-      pan: { x: network_pan_x, y: network_pan_y },
-      fit: true,
+        selecteed_node_id = n.data.id;
+        selected_edge_id = 0;
+
+        if (n.config.type === 'host'){
+            ShowHostConfig(n);
+        } else if (n.config.type === 'l1_hub'){
+            ShowHubConfig(n);
+        } else if (n.config.type === 'l2_switch'){
+            ShowSwitchConfig(n);
+        } else if (n.config.type === 'router'){
+            ShowRouterConfig(n);
+        } else if (n.config.type === 'server'){
+            ShowServerConfig(n);
+        }
     });
 
-    global_cy = cy;
-  }
+    // Add edge to the edges[] and then save it to the server.
+    cy.on('ehcomplete', (event, sourceNode, targetNode, addedEdge) => {
+        AddEdge(sourceNode._private.data.id, targetNode._private.data.id);
+        PostNodesEdges();
+        TakeGraphPictureAndUpdate();
 
-  cy.autounselectify(true);
+        SetNetworkPlayerState(-1);
+    });
 
-  cy.minZoom(0.5);
-  cy.maxZoom(2);
+    $(document).on('keyup', function(e){
 
-  cy.add(nodes);
-  cy.add(edges);
+        if (e.keyCode == 46 && selecteed_node_id) {
 
-  // Click on object
-  cy.on("click", function (evt) {
-    let evtTarget = evt.target;
-    if (evtTarget === cy) {
-      ClearConfigForm("");
-      selecteed_node_id = 0;
-      selected_edge_id = 0;
-      return;
-    }
+            // Save the network state.
+            SaveNetworkObject();
+                        
+            DeleteNode(selecteed_node_id);
+            DeleteJob(selecteed_node_id);
 
-    // Is this edge ?
-    if (evtTarget.group() === "edges") {
-      selected_edge_id = evtTarget.data().id;
-      ShowEdgeConfig(selected_edge_id, 1);
-      selecteed_node_id = 0;
-      return;
-    }
+            ClearConfigForm('');
+            selecteed_node_id = 0;
+            selected_edge_id = 0;
 
-    var target_id = evt.target.id();
-    let n = nodes.find((n) => n.data.id === target_id);
+            PostNodesEdges();               // Update network on server
+            cy.elements().remove();
+            cy.add(nodes);
+            cy.add(edges);
 
-    if (!n) {
-      return;
-    }
+            TakeGraphPictureAndUpdate();
 
-    selecteed_node_id = n.data.id;
-    selected_edge_id = 0;
-
-    if (n.config.type === "host") {
-      ShowHostConfig(n, (shared = 1));
-    } else if (n.config.type === "l1_hub") {
-      ShowHubConfig(n, (shared = 1));
-    } else if (n.config.type === "l2_switch") {
-      ShowSwitchConfig(n, (shared = 1));
-    } else if (n.config.type === "router") {
-      ShowRouterConfig(n, (shared = 1));
-    } else if (n.config.type === "server") {
-      ShowServerConfig(n, (shared = 1));
-    }
-  });
-};
+            // Reset network state
+            SetNetworkPlayerState(-1);
+        }
+        if (e.keyCode ==  46 && selected_edge_id) {
 
-const DrawIndexGraphStatic = function (
-  nodes,
-  edges,
-  container_id,
-  graph_network_zoom,
-  graph_network_pan_x,
-  graph_network_pan_y
-) {
-  let index_cy = cytoscape({
-    container: document.getElementById(container_id),
-    boxSelectionEnabled: true,
-    autounselectify: false,
-    style: prepareStylesheet(),
-    elements: [],
-    layout: "preset",
-    zoom: graph_network_zoom,
-    pan: { x: graph_network_pan_x, y: graph_network_pan_y },
-    fit: true,
-  });
-
-  index_cy.autounselectify(false);
-
-  index_cy.add(nodes);
-  index_cy.add(edges);
-  index_cy.panningEnabled(false);
-
-  index_cy.nodes().ungrabify();
-  return index_cy;
-};
+            // Save the network state.
+            SaveNetworkObject();
 
-// Check whether simulation is over and we can run packets
-const CheckSimulation = function (simulation_id) {
-  $.ajax({
-    type: "GET",
-    url:
-      "/check_simulation?simulation_id=" +
-      simulation_id +
-      "&network_guid=" +
-      network_guid,
-    data: "",
-    success: function (data, textStatus, xhr) {
-      // If we got 210 (processing) wait 2 sec and call themself again
-      if (xhr.status === 210) {
-        setTimeout(CheckSimulation, 2000, simulation_id);
-      }
+            DeleteEdge(selected_edge_id);
 
-      // Simulation is ended up and we can grab the packets
-      if (xhr.status === 200) {
-        packets = JSON.parse(data.packets);
-        pcaps = data.pcaps;
+            ClearConfigForm('');
+            selecteed_node_id = 0;
+            selected_edge_id = 0;
 
-        // Set filters
-        packets_not_filtered = null;
-        SetPacketFilter();
+            PostNodesEdges();               // Update network on server
+            cy.elements().remove();
+            cy.add(nodes);
+            cy.add(edges);
 
-        const answerButton = document.querySelector(
-          'button[name="answerQuestion"]'
-        );
-        if (answerButton) {
-          answerButton.disabled = false;
+            TakeGraphPictureAndUpdate();
+
+            // Reset network state
+            SetNetworkPlayerState(-1);
         }
-      }
-    },
-    error: function (xhr) {
-      console.log("Cannot check simulation id = " + simulation_id);
-      SetNetworkPlayerState(-1);
-    },
-    contentType: "application/json",
-    dataType: "json",
-  });
-};
 
-// Update edge configuration
-const UpdateEdgeConfiguration = (data) => {
-  SetNetworkPlayerState(-1);
-
-  return $.ajax({
-    type: "POST",
-    url: "/edge/save_config",
-    data: data,
-    complete: function () {
-      DrawGraph();
-      $("#config_edge_main_form_submit_button").html("Сохранить");
-    },
-    error: function (xhr) {
-      console.log("Не удалось обновить конфигурацию ребра");
-      console.log(xhr);
-    },
-    dataType: "json",
-  });
-};
+        if (e.keyCode == 90 && e.ctrlKey){
 
-const InsertWaitingTime = function () {
-  // Get last emulation task time
-  // and send request to get count of emulating networks before this time
-  $.ajax({
-    type: "GET",
-    url: "emulation_queue/time",
-    data: "",
-    success: function (data) {
-      // Run helper function with time param
-      InsertWaitingTimeHelper(data.time);
-    },
-    error: function (err) {
-      console.error("Failed to fetch queue time:", err);
-    },
-    contentType: "application/json",
-    dataType: "json",
-  });
-};
+            ClearConfigForm('');
+            selecteed_node_id = 0;
+            selected_edge_id = 0;
 
-const InsertWaitingTimeHelper = function (time_filter) {
-  // Insert field with queue size
-  $.ajax({
-    type: "GET",
-    url: "emulation_queue/size?time-filter=" + time_filter.toString(),
-    data: "",
-    success: function (data) {
-      const queue_size = parseInt(data.size);
+            RestoreNetworkObject();
 
-      if ($("#NetworkPlayerLabel").text().startsWith("Шаг:")) {
-        return;
-      } else if (queue_size <= 1) {
-        $("#NetworkPlayerLabel").text("Ожидание 10-15 сек.");
-      } else {
-        $("#NetworkPlayerLabel").text(`Место в очереди ${queue_size}`);
+            PostNodesEdges();               // Update network on server
+            cy.elements().remove();
+            cy.add(nodes);
+            cy.add(edges);
 
-        // Update waiting time
-        setTimeout(() => InsertWaitingTimeHelper(time_filter), 500);
-      }
-    },
-    error: function (err) {
-      console.error("Failed to fetch queue size:", err);
-    },
-    contentType: "application/json",
-    dataType: "json",
-  });
-};
+            TakeGraphPictureAndUpdate();
 
-// Update host configuration
-const UpdateHostConfiguration = function (data, host_id) {
-  // Reset network player
-  SetNetworkPlayerState(-1);
-
-  $.ajax({
-    type: "POST",
-    url: "/host/save_config",
-    data: data,
-    success: function (data, textStatus, xhr) {
-      if (xhr.status === 200) {
-        if (!data.warning) {
-          // Update nodes
-          nodes = data.nodes;
-
-          // Update jobs
-          jobs = data.jobs;
-
-          // Update graph
-          DrawGraph();
+            // Reset network state
+            SetNetworkPlayerState(-1);
         }
 
-        // Ok, let's try to update host config form
-        let n = nodes.find((n) => n.data.id === host_id);
+    });
+}
 
-        if (!n) {
-          ClearConfigForm("Нет такого хоста");
-          return;
-        }
+const DrawGraphStatic = function(nodes, edges, shared=0) {
 
-        if (n.config.type === "host") {
-          ShowHostConfig(n);
-        } else {
-          ClearConfigForm("Узел есть, но это не хост");
-          return;
-        }
+    // Do we already have one?
+    let cy = undefined;
 
-        if (data.warning) {
-          HostWarningMsg(data.warning);
-        }
-      }
-    },
-    error: function (xhr) {
-      console.log("Не удалось обновить конфигурацию хоста");
-      console.log(xhr);
-    },
-    dataType: "json",
-  });
-};
+    let network_scheme_id = "network_scheme";
 
-// Delete job from host
-const DeleteJobFromHost = function (host_id, job_id, network_guid) {
-  // Reset network player
-  SetNetworkPlayerState(-1);
+    if (shared){
+        network_scheme_id = "network_scheme_shared";
+    }
 
-  let data = {
-    id: job_id,
-    guid: network_guid,
-  };
+    if (global_cy)
+    {
+        cy = global_cy;
+        cy.elements().remove();
+    } else {
+        cy = cytoscape({
+            container: document.getElementById(network_scheme_id),
+            boxSelectionEnabled: true,
+            autounselectify: false,
+            style: prepareStylesheet(),
+            elements: [],
+            layout: 'preset',
+            zoom: network_zoom,
+            pan: { x: network_pan_x, y: network_pan_y },
+            fit: true,
+        });
 
-  $.ajax({
-    type: "POST",
-    url: "/host/delete_job",
-    data: data,
-    encode: true,
-    success: function (data, textStatus, xhr) {
-      if (xhr.status === 200) {
-        // Update jobs
-        jobs = data.jobs;
+         global_cy = cy;
+    }
 
-        // Update graph
-        DrawGraph();
+    // Turn off edges creation.
+    if (global_eh){
+        global_eh.disable();
+    }
 
-        // Ok, let's try to update host config form
-        let n = nodes.find((n) => n.data.id === host_id);
+    cy.autounselectify(false);
+    cy.add(nodes);
+    cy.add(edges);
+    cy.nodes().ungrabify();
+    return;
+}
+
+const DrawSharedGraph = function(nodes, edges) {
+
+    // Do we already have one?
+    let cy = undefined;
+
+    if (global_cy)
+    {
+        cy = global_cy;
+        cy.elements().remove();
+    } else {
+        cy = cytoscape({
+            container: document.getElementById("network_scheme_shared"),
+            boxSelectionEnabled: true,
+            autounselectify: true,
+            style: prepareStylesheet(),
+            elements: [],
+            layout: 'preset',
+            zoom: network_zoom,
+            pan: { x: network_pan_x, y: network_pan_y },
+            fit: true,
+        });
 
-        if (!n) {
-          ClearConfigForm("Нет такого хоста");
-          return;
-        }
+        global_cy = cy;
+    }
 
-        if (n.config.type === "host") {
-          ShowHostConfig(n);
-        } else {
-          ClearConfigForm("Узел есть, но это не хост");
-        }
-      }
-    },
-    error: function (xhr) {
-      console.log("Не удалось удалить команду");
-      console.log(xhr);
-    },
-    dataType: "json",
-  });
-};
+    cy.autounselectify(true);
 
-// Delete job from router
-const DeleteJobFromRouter = function (router_id, job_id, network_guid) {
-  // Reset network player
-  SetNetworkPlayerState(-1);
+    cy.minZoom(0.5);
+    cy.maxZoom(2);
 
-  let data = {
-    id: job_id,
-    guid: network_guid,
-  };
+    cy.add(nodes);
+    cy.add(edges);
+
+    // Click on object
+    cy.on('click', function (evt) {
 
-  $.ajax({
-    type: "POST",
-    url: "/host/delete_job",
-    data: data,
-    encode: true,
-    success: function (data, textStatus, xhr) {
-      if (xhr.status === 200) {
-        // Update jobs
-        jobs = data.jobs;
+        let evtTarget = evt.target;
+        if (evtTarget === cy) {
+            ClearConfigForm('');
+            selecteed_node_id = 0;
+            selected_edge_id = 0;
+            return;
+        }
 
-        // Update graph
-        DrawGraph();
+        // Is this edge ?
+        if (evtTarget.group() === 'edges'){
+            selected_edge_id = evtTarget.data().id;
+            ShowEdgeConfig(selected_edge_id, 1);
+            selecteed_node_id = 0;
+            return;
+        }
 
-        // Ok, let's try to update host config form
-        let n = nodes.find((n) => n.data.id === router_id);
+        var target_id = evt.target.id();
+        let n = nodes.find(n => n.data.id === target_id);
 
         if (!n) {
-          ClearConfigForm("Нет такого хоста");
-          return;
+            return;
         }
 
-        if (n.config.type === "router") {
-          ShowRouterConfig(n);
-        } else {
-          ClearConfigForm("Узел есть, но это не раутер");
+        selecteed_node_id = n.data.id;
+        selected_edge_id = 0;
+
+        if (n.config.type === 'host'){
+            ShowHostConfig(n, shared=1);
+        } else if (n.config.type === 'l1_hub'){
+            ShowHubConfig(n, shared=1);
+        } else if (n.config.type === 'l2_switch'){
+            ShowSwitchConfig(n, shared=1);
+        } else if (n.config.type === 'router'){
+            ShowRouterConfig(n, shared=1);
+        } else if (n.config.type === 'server'){
+            ShowServerConfig(n, shared=1);
         }
-      }
-    },
-    error: function (xhr) {
-      console.log("Не удалось удалить команду");
-      console.log(xhr);
-    },
-    dataType: "json",
-  });
-};
-
-// Delete job from server
-const DeleteJobFromServer = function (server_id, job_id, network_guid) {
-  // Reset network player
-  SetNetworkPlayerState(-1);
+    });
+}
+
+const DrawIndexGraphStatic = function(nodes, edges, container_id, graph_network_zoom,
+                                    graph_network_pan_x, graph_network_pan_y)
+{
+
+    let index_cy = cytoscape({
+        container: document.getElementById(container_id),
+        boxSelectionEnabled: true,
+        autounselectify: false,
+        style: prepareStylesheet(),
+        elements: [],
+        layout: 'preset',
+        zoom: graph_network_zoom,
+            pan: { x: graph_network_pan_x, y: graph_network_pan_y },
+            fit: true,
+        });
 
-  let data = {
-    id: job_id,
-    guid: network_guid,
-  };
+    index_cy.autounselectify(false);
 
-  $.ajax({
-    type: "POST",
-    url: "/host/delete_job",
-    data: data,
-    encode: true,
-    success: function (data, textStatus, xhr) {
-      if (xhr.status === 200) {
-        // Update jobs
-        jobs = data.jobs;
+    index_cy.add(nodes);
+    index_cy.add(edges);
+    index_cy.panningEnabled(false);
 
-        // Update graph
-        DrawGraph();
+    index_cy.nodes().ungrabify();
+    return index_cy;
+}
 
-        // Ok, let's try to update host config form
-        let n = nodes.find((n) => n.data.id === server_id);
+// Check whether simulation is over and we can run packets
+const CheckSimulation = function (simulation_id)
+{
+    $.ajax({
+        type: 'GET',
+        url: '/check_simulation?simulation_id=' + simulation_id + '&network_guid=' + network_guid,
+        data: '',
+        success: function(data, textStatus, xhr) {
+
+            // If we got 210 (processing) wait 2 sec and call themself again
+            if (xhr.status === 210)
+            {
+                setTimeout(CheckSimulation, 2000, simulation_id);
+            }
+
+            // Simulation is ended up and we can grab the packets
+            if (xhr.status === 200)
+            {
+                packets = JSON.parse(data.packets);
+                pcaps = data.pcaps;
+
+                // Set filters
+                packets_not_filtered = null;
+                SetPacketFilter();
+
+                // TODO: подумать над этим
+                // SetNetworkPlayerState(0);
+
+                const answerButton = document.querySelector('button[name="answerQuestion"]');
+                if (answerButton) {
+                    answerButton.disabled = false;
+                }
+            }
+        },
+        error: function(xhr) {
+            console.log('Cannot check simulation id = ' + simulation_id);
+            SetNetworkPlayerState(-1);
+        },
+        contentType: "application/json",
+        dataType: 'json'
+    });
+}
 
-        if (!n) {
-          ClearConfigForm("Нет такого хоста");
-          return;
-        }
+// Update edge configuration
+const UpdateEdgeConfiguration = (data) => {
+    SetNetworkPlayerState(-1);
 
-        if (n.config.type === "server") {
-          ShowServerConfig(n);
-        } else {
-          ClearConfigForm("Узел есть, но это не сервер");
-        }
-      }
-    },
-    error: function (xhr) {
-      console.log("Не удалось удалить команду");
-      console.log(xhr);
-    },
-    dataType: "json",
-  });
+    return $.ajax({
+        type: 'POST',
+        url: '/edge/save_config',
+        data: data,
+        complete: function() {
+            DrawGraph();
+            $('#config_edge_main_form_submit_button').html('Сохранить');
+        },
+        error: function(xhr) {
+            console.log('Не удалось обновить конфигурацию ребра');
+            console.log(xhr);
+        },
+        dataType: 'json'
+    });
 };
 
-// Update router configuration
-const UpdateRouterConfiguration = function (data, router_id) {
-  // Reset network player
-  SetNetworkPlayerState(-1);
-
-  $.ajax({
-    type: "POST",
-    url: "/host/router_save_config",
-    data: data,
-    success: function (data, textStatus, xhr) {
-      if (xhr.status === 200) {
-        // Update nodes
-        if (data.nodes) {
-          nodes = data.nodes;
-        }
 
-        // Update jobs
-        if (data.jobs) {
-          jobs = data.jobs;
-        }
+const InsertWaitingTime = function ()
+{
+    // Get last emulation task time
+    // and send request to get count of emulating networks before this time
+    $.ajax({
+        type: 'GET',
+        url: 'emulation_queue/time',
+        data: '',
+        success: function(data) {
+            // Run helper function with time param
+            InsertWaitingTimeHelper(data.time)
+        },
+        error: function(err) {
+            console.error("Failed to fetch queue time:", err);
+        },
+        contentType: "application/json",
+        dataType: 'json'
+    });
+}
+
+const InsertWaitingTimeHelper = function(time_filter) {
+    // Insert field with queue size
+    $.ajax({
+        type: 'GET',
+        url: 'emulation_queue/size?time-filter=' + time_filter.toString(),
+        data: '',
+        success: function(data) {
+            const queue_size = parseInt(data.size);
+
+            if ($('#NetworkPlayerLabel').text().startsWith("Шаг:")) {
+                return;
+            } else if (queue_size <= 1) {
+                $('#NetworkPlayerLabel').text("Ожидание 10-15 сек.");
+            } else {
+                $('#NetworkPlayerLabel').text(`Место в очереди ${queue_size}`);
+
+                // Update waiting time
+                setTimeout(() => InsertWaitingTimeHelper(time_filter), 500);
+            }
 
-        // Update graph
-        DrawGraph();
+        },
+        error: function(err) {
+            console.error("Failed to fetch queue size:", err);
+        },
+        contentType: "application/json",
+        dataType: 'json'
+    });
+}
+
+// Update host configuration
+const UpdateHostConfiguration = function (data, host_id)
+{
+    // Reset network player
+    SetNetworkPlayerState(-1);
 
-        // Ok, let's try to update router config form
-        let n = nodes.find((n) => n.data.id === router_id);
+    $.ajax({
+        type: 'POST',
+        url: '/host/save_config',
+        data: data,
+        success: function(data, textStatus, xhr) {
+
+            if (xhr.status === 200)
+            {
+                if (!data.warning){
+
+                    // Update nodes
+                    nodes = data.nodes;
+
+                    // Update jobs
+                    jobs = data.jobs;
+
+                    // Update graph
+                    DrawGraph();
+                }
+
+                // Ok, let's try to update host config form
+                let n = nodes.find(n => n.data.id === host_id);
+
+                if (!n) {
+                    ClearConfigForm('Нет такого хоста');
+                    return;
+                }
+
+                if (n.config.type === 'host'){
+                    ShowHostConfig(n);
+                } else {
+                    ClearConfigForm('Узел есть, но это не хост');
+                    return;
+                }
+
+                if (data.warning){
+                    HostWarningMsg(data.warning);
+                }
+            }
+        },
+        error: function(xhr) {
+            console.log('Не удалось обновить конфигурацию хоста');
+            console.log(xhr);
+        },
+        dataType: 'json'
+    });
+}
 
-        if (!n) {
-          ClearConfigForm("Нет такого раутера");
-          return;
-        }
+// Delete job from host
+const DeleteJobFromHost = function (host_id, job_id, network_guid)
+{
+    // Reset network player
+    SetNetworkPlayerState(-1);
 
-        if (n.config.type === "router") {
-          ShowRouterConfig(n);
-        } else {
-          ClearConfigForm("Узел есть, но это не раутер");
-          return;
-        }
+    let data = {
+      id: job_id,
+      guid: network_guid,
+    };
+
+    $.ajax({
+        type: 'POST',
+        url: '/host/delete_job',
+        data: data,
+        encode: true,
+        success: function(data, textStatus, xhr) {
+
+            if (xhr.status === 200)
+            {
+                // Update jobs
+                jobs = data.jobs;
+
+                // Update graph
+                DrawGraph();
+
+                // Ok, let's try to update host config form
+                let n = nodes.find(n => n.data.id === host_id);
+
+                if (!n) {
+                    ClearConfigForm('Нет такого хоста');
+                    return;
+                }
+
+                if (n.config.type === 'host'){
+                    ShowHostConfig(n);
+                } else {
+                    ClearConfigForm('Узел есть, но это не хост');
+                }
+
+            }
+        },
+        error: function(xhr) {
+            console.log('Не удалось удалить команду');
+            console.log(xhr);
+        },
+        dataType: 'json'
+    });
+}
 
-        if (data.warning) {
-          HostWarningMsg(data.warning);
-        }
-      }
-    },
-    error: function (xhr) {
-      console.log("Не удалось обновить конфигурацию хоста");
-      console.log(xhr);
-    },
-    dataType: "json",
-  });
-};
+// Delete job from router
+const DeleteJobFromRouter = function (router_id, job_id, network_guid)
+{
+    // Reset network player
+    SetNetworkPlayerState(-1);
 
-// Update server configuration
-const UpdateServerConfiguration = function (data, router_id) {
-  // Reset network player
-  SetNetworkPlayerState(-1);
-
-  $.ajax({
-    type: "POST",
-    url: "/host/server_save_config",
-    data: data,
-    success: function (data, textStatus, xhr) {
-      if (xhr.status === 200) {
-        if (!data.warning) {
-          if (data.nodes) {
-            nodes = data.nodes;
-          }
-
-          if (data.jobs) {
-            jobs = data.jobs;
-          }
-
-          // Update graph
-          DrawGraph();
-        }
+    let data = {
+      id: job_id,
+      guid: network_guid,
+    };
+
+    $.ajax({
+        type: 'POST',
+        url: '/host/delete_job',
+        data: data,
+        encode: true,
+        success: function(data, textStatus, xhr) {
+
+            if (xhr.status === 200)
+            {
+                // Update jobs
+                jobs = data.jobs;
+
+                // Update graph
+                DrawGraph();
+
+                // Ok, let's try to update host config form
+                let n = nodes.find(n => n.data.id === router_id);
+
+                if (!n) {
+                    ClearConfigForm('Нет такого хоста');
+                    return;
+                }
+
+                if (n.config.type === 'router'){
+                    ShowRouterConfig(n);
+                } else {
+                    ClearConfigForm('Узел есть, но это не раутер');
+                }
+            }
+        },
+        error: function(xhr) {
+            console.log('Не удалось удалить команду');
+            console.log(xhr);
+        },
+        dataType: 'json'
+    });
+}
 
-        // Ok, let's try to update router config form
-        let n = nodes.find((n) => n.data.id === router_id);
+// Delete job from server
+const DeleteJobFromServer = function (server_id, job_id, network_guid)
+{
+    // Reset network player
+    SetNetworkPlayerState(-1);
 
-        if (!n) {
-          ClearConfigForm("Нет такого сервера");
-          return;
-        }
+    let data = {
+      id: job_id,
+      guid: network_guid,
+    };
+
+    $.ajax({
+        type: 'POST',
+        url: '/host/delete_job',
+        data: data,
+        encode: true,
+        success: function(data, textStatus, xhr) {
+
+            if (xhr.status === 200)
+            {
+                // Update jobs
+                jobs = data.jobs;
+
+                // Update graph
+                DrawGraph();
+
+                // Ok, let's try to update host config form
+                let n = nodes.find(n => n.data.id === server_id);
+
+                if (!n) {
+                    ClearConfigForm('Нет такого хоста');
+                    return;
+                }
+
+                if (n.config.type === 'server'){
+                    ShowServerConfig(n);
+                } else {
+                    ClearConfigForm('Узел есть, но это не сервер');
+                }
+            }
+        },
+        error: function(xhr) {
+            console.log('Не удалось удалить команду');
+            console.log(xhr);
+        },
+        dataType: 'json'
+    });
+}
 
-        if (n.config.type === "server") {
-          ShowServerConfig(n);
-        } else {
-          ClearConfigForm("Узел есть, но это не сервер");
-          return;
-        }
+// Update router configuration
+const UpdateRouterConfiguration = function (data, router_id)
+{
+    // Reset network player
+    SetNetworkPlayerState(-1);
 
-        if (data.warning) {
-          ServerWarningMsg(data.warning);
-        }
-      }
-    },
-    error: function (xhr) {
-      console.log("Не удалось обновить конфигурацию сервера");
-      console.log(xhr);
-    },
-    dataType: "json",
-  });
-};
+    $.ajax({
+        type: 'POST',
+        url: '/host/router_save_config',
+        data: data,
+        success: function(data, textStatus, xhr) {
+
+            if (xhr.status === 200)
+            {
+                // Update nodes
+                if (data.nodes)
+                {
+                    nodes = data.nodes;
+                }
+
+                // Update jobs
+                if (data.jobs)
+                {
+                    jobs = data.jobs;
+                }
+
+                // Update graph
+                DrawGraph();
+
+                // Ok, let's try to update router config form
+                let n = nodes.find(n => n.data.id === router_id);
+
+                if (!n) {
+                    ClearConfigForm('Нет такого раутера');
+                    return;
+                }
+
+                if (n.config.type === 'router'){
+                    ShowRouterConfig(n);
+                } else {
+                    ClearConfigForm('Узел есть, но это не раутер');
+                    return;
+                }
+
+                if (data.warning)
+                {
+                    HostWarningMsg(data.warning);
+                }
+            }
 
-// Update hub configuration
-const UpdateHubConfiguration = function (data, hub_id) {
-  $.ajax({
-    type: "POST",
-    url: "/host/hub_save_config",
-    data: data,
-    success: function (data, textStatus, xhr) {
-      if (xhr.status === 200) {
-        // Update nodes
-        nodes = data.nodes;
+        },
+        error: function(xhr) {
+            console.log('Не удалось обновить конфигурацию хоста');
+            console.log(xhr);
+        },
+        dataType: 'json'
+    });
+}
 
-        // We don't clear packets and RunButtonState.
-        // Hub can change only names
+// Update server configuration
+const UpdateServerConfiguration = function (data, router_id)
+{
+    // Reset network player
+    SetNetworkPlayerState(-1);
 
-        // Update graph
-        DrawGraph();
+    $.ajax({
+        type: 'POST',
+        url: '/host/server_save_config',
+        data: data,
+        success: function(data, textStatus, xhr) {
 
-        // Ok, let's try to update host config form
-        let n = nodes.find((n) => n.data.id === hub_id);
+            if (xhr.status === 200)
+            {
 
-        if (!n) {
-          ClearConfigForm("Нет такого узла");
-          return;
-        }
+                if (!data.warning){
 
-        if (n.config.type === "l1_hub") {
-          ShowHubConfig(n);
-        } else {
-          ClearConfigForm("Нет такого хаба");
-        }
-      }
-    },
-    error: function (xhr) {
-      console.log("Cannot update host config");
-      console.log(xhr);
-    },
-    dataType: "json",
-  });
-};
+                    if (data.nodes){
+                        nodes = data.nodes;
+                    }
 
-// Update Switch configuration
-const UpdateSwitchConfiguration = function (data, switch_id) {
-  // Reset network player
-  SetNetworkPlayerState(-1);
+                    if (data.jobs){
+                        jobs = data.jobs;
+                    }
 
-  $.ajax({
-    type: "POST",
-    url: "/host/switch_save_config",
-    data: data,
-    success: function (data, textStatus, xhr) {
-      if (xhr.status === 200) {
-        // Update nodes
-        nodes = data.nodes;
+                    // Update graph
+                    DrawGraph();
+                }
 
-        // We don't clear packets and RunButtonState.
-        // Hub can change only names
+                // Ok, let's try to update router config form
+                let n = nodes.find(n => n.data.id === router_id);
 
-        // Update graph
-        DrawGraph();
+                if (!n) {
+                    ClearConfigForm('Нет такого сервера');
+                    return;
+                }
 
-        // Ok, let's try to update host config form
-        let n = nodes.find((n) => n.data.id === switch_id);
+                if (n.config.type === 'server'){
+                    ShowServerConfig(n);
+                } else {
+                    ClearConfigForm('Узел есть, но это не сервер');
+                    return;
+                }
 
-        if (!n) {
-          ClearConfigForm("Нет такого узла");
-          return;
-        }
+                if (data.warning)
+                {
+                    ServerWarningMsg(data.warning);
+                }
+            }
 
-        if (n.config.type === "l2_switch") {
-          ShowSwitchConfig(n);
-        } else {
-          ClearConfigForm("Нет такого свитча");
-        }
-      }
-    },
-    error: function (xhr) {
-      console.log("Cannot update host config");
-      console.log(xhr);
-    },
-    dataType: "json",
-  });
-};
+        },
+        error: function(xhr) {
+            console.log('Не удалось обновить конфигурацию сервера');
+            console.log(xhr);
+        },
+        dataType: 'json'
+    });
+}
 
-const RunSimulation = function (network_guid) {
-  $.ajax({
-    type: "POST",
-    url: "/run_simulation?guid=" + network_guid,
-    data: "",
-    success: function (data, textStatus, xhr) {
-      if (xhr.status === 201) {
-        console.log("Simulation is running!");
-        // Ok, run CheckSimulation
-        if (data.simulation_id) {
-          CheckSimulation(data.simulation_id);
-        }
-      }
-    },
-    error: function (err) {
-      console.log("Cannot run simulation guid = " + network_guid);
-      SetNetworkPlayerState(-1);
-    },
-    contentType: "application/json",
-    dataType: "json",
-  });
-};
+// Update hub configuration
+const UpdateHubConfiguration = function (data, hub_id)
+{
+    $.ajax({
+        type: 'POST',
+        url: '/host/hub_save_config',
+        data: data,
+        success: function(data, textStatus, xhr) {
+
+            if (xhr.status === 200)
+            {
+                // Update nodes
+                nodes = data.nodes;
+
+                // We don't clear packets and RunButtonState.
+                // Hub can change only names
+
+                // Update graph
+                DrawGraph();
+
+                // Ok, let's try to update host config form
+                let n = nodes.find(n => n.data.id === hub_id);
+
+                if (!n) {
+                    ClearConfigForm('Нет такого узла');
+                    return;
+                }
+
+                if (n.config.type === 'l1_hub'){
+                    ShowHubConfig(n);
+                } else {
+                    ClearConfigForm('Нет такого хаба');
+                }
+            }
+        },
+        error: function(xhr) {
+            console.log('Cannot update host config');
+            console.log(xhr);
+        },
+        dataType: 'json'
+    });
+}
+
+// Update Switch configuration
+const UpdateSwitchConfiguration = function (data, switch_id)
+{
+    // Reset network player
+    SetNetworkPlayerState(-1);
+
+    $.ajax({
+        type: 'POST',
+        url: '/host/switch_save_config',
+        data: data,
+        success: function(data, textStatus, xhr) {
+
+            if (xhr.status === 200)
+            {
+                // Update nodes
+                nodes = data.nodes;
+
+                // We don't clear packets and RunButtonState.
+                // Hub can change only names
+
+                // Update graph
+                DrawGraph();
+
+                // Ok, let's try to update host config form
+                let n = nodes.find(n => n.data.id === switch_id);
+
+                if (!n) {
+                    ClearConfigForm('Нет такого узла');
+                    return;
+                }
+
+                if (n.config.type === 'l2_switch'){
+                    ShowSwitchConfig(n);
+                } else {
+                    ClearConfigForm('Нет такого свитча');
+                }
+            }
+        },
+        error: function(xhr) {
+            console.log('Cannot update host config');
+            console.log(xhr);
+        },
+        dataType: 'json'
+    });
+}
+
+const RunSimulation = function (network_guid)
+{
+    $.ajax({
+        type: 'POST',
+        url: '/run_simulation?guid=' + network_guid,
+        data: '',
+        success: function(data, textStatus, xhr) {
+            if (xhr.status === 201)
+            {
+                console.log("Simulation is running!");
+                // Ok, run CheckSimulation
+                if (data.simulation_id)
+                {
+                    CheckSimulation(data.simulation_id);
+                }
+            }
+        },
+        error: function(err) {
+            console.log('Cannot run simulation guid = ' + network_guid);
+            SetNetworkPlayerState(-1);
+        },
+        contentType: "application/json",
+        dataType: 'json'
+    });
+}
 
 const FilterPackets = function () {
-  if (filterState.hideARP)
-    packets = packets
-      .map((step) => step.filter((pkt) => !pkt.data.label.startsWith("ARP")))
-      .filter((step) => step.length > 0);
-
-  if (filterState.hideSTP)
-    packets = packets
-      .map((step) =>
-        step.filter(
-          (pkt) =>
-            !(
-              pkt.data.label.startsWith("STP") ||
-              pkt.data.label.startsWith("RSTP")
+        packets = packets
+            .map((step) =>
+                step.filter(
+                    (pkt) =>
+                        !(
+                            (filterState.hideARP &&
+                            pkt.data.label.startsWith("ARP")) ||
+                            filterState.hideSTP &&
+                            (pkt.data.label.startsWith("STP") ||
+                            pkt.data.label.startsWith("RSTP"))
+                        )
+                )
             )
-        )
-      )
-      .filter((step) => step.length > 0);
-  console.log("filterState:", filterState);
-  console.log("Packets after filters:", packets);
+            .filter((step) => step.length > 0);
 };
 
-const RecoverFilterStates = function () {
-  $("#ARPFilterCheckbox").prop("checked", filterState.hideARP);
-  $("#STPFilterCheckbox").prop("checked", filterState.hideSTP);
+const ResetFilterStates = function () {
+    $("#ARPFilterCheckbox").prop("checked", filterState.hideARP);
+    $("#STPFilterCheckbox").prop("checked", filterState.hideSTP);
 };
 
+
 const SetPacketFilter = function () {
-  console.log("Packet filter call");
-  // SetPacketFilter first call on emulated network
-  if (packets && !packets_not_filtered) {
-    packets_not_filtered = JSON.parse(JSON.stringify(packets)); // Array deep copy
-  }
-  // Numerous filter call, we grab our packets copy to filter it
-  else if (packets_not_filtered) {
-    packets = JSON.parse(JSON.stringify(packets_not_filtered));
-  }
-
-  filterState.hideARP = $("#ARPFilterCheckbox").is(":checked");
-  filterState.hideSTP = $("#STPFilterCheckbox").is(":checked");
-
-  console.log("filterState after filter call:", filterState);
-  if (packets) {
-    console.log("packets here");
-    FilterPackets();
-
-    SetNetworkPlayerState(0);
-  }
+    console.log("Packet filter call");
+    // SetPacketFilter first call on emulated network
+    if (packets && !packets_not_filtered) {
+        packets_not_filtered = JSON.parse(JSON.stringify(packets)); // Array deep copy
+    }
+    // Numerous filter call, we grab our packets copy to filter it
+    else if (packets_not_filtered) {
+        packets = JSON.parse(JSON.stringify(packets_not_filtered));
+    }
+
+    filterState.hideARP = $("#ARPFilterCheckbox").is(":checked");
+    filterState.hideSTP = $("#STPFilterCheckbox").is(":checked");
+
+    if (packets) {
+        FilterPackets();
+        SetNetworkPlayerState(0);
+    }
 };
 
 // 2 states:
 // Do we need emulation
 // We have a packets and ready to play packets
-const SetNetworkPlayerState = function (simultaion_id) {
-  // Reset?
-  if (simultaion_id === -1) {
-    packets = null;
-    packets_not_filtered = null;
-    pcaps = [];
-    SetNetworkPlayerState(0);
-    return;
-  }
-
-  // If we have packets, then we're ready to run
-  if (packets) {
-    $("#NetworkPlayer").empty();
-    $("#NetworkPlayer").append(
-      '<button type="button" class="btn btn-danger me-2" id="NetworkStopButton"><i class="bx bx-stop fs-xl"></i></button>'
-    );
-    $("#NetworkPlayer").append(
-      '<button type="button" class="btn btn-success" id="NetworkPlayPauseButton" onclick="if (typeof window.ym != \'undefined\'){ym(92293993,\'reachGoal\',\'PlayPauseButton\');}"><i class="bx bx-play fs-xl"></i></button>'
-    );
-
-    // Init player
-    PacketPlayer.getInstance().InitPlayer(packets);
-
-    // Configure the slider
-    $("#PacketSliderInput")[0].noUiSlider.updateOptions({
-      start: [1],
-      range: {
-        min: 1,
-        max: packets.length,
-      },
-      format: {
-        to: function (val) {
-          return "" + val;
-        },
-        from: function (val) {
-          return "" + val;
-        },
-      },
-      tooltips: false,
-    });
+const SetNetworkPlayerState = function (simulation_id) {
 
-    // Show Slider on
-    $("#PacketSliderInput").show();
-
-    const pkt_count = packets.reduce(
-      (currentCount, row) => currentCount + row.length,
-      0
-    );
-    $("#NetworkPlayerLabel").text(
-      packets.length +
-        " " +
-        NumWord(packets.length, ["шаг", "шага", "шагов"]) +
-        " / " +
-        pkt_count +
-        " " +
-        NumWord(pkt_count, ["пакет", "пакета", "пакетов"])
-    );
-
-    $("#PacketSliderInput")[0].noUiSlider.on("slide", function (e) {
-      if (!e) return;
-      let x = Math.round(e[0]);
-      PacketPlayer.getInstance().setAnimationTrafficStep(x - 1);
-    });
-
-    $("#PacketSliderInput")[0].noUiSlider.on("update", function (e) {
-      if (!e) return;
-      let x = Math.round(e[0]);
-      if (packets.length === 0) {
-        $("#NetworkPlayerLabel").text("0 пакетов");
+    // Reset?
+    if (simulation_id === -1) {
+        packets_not_filtered = null;
+        packets = null;
+        pcaps = [];
+        SetNetworkPlayerState(0);
         return;
-      }
-      $("#NetworkPlayerLabel").text(
-        "Шаг: " +
-          x +
-          "/" +
-          packets.length +
-          " (" +
-          packets[x - 1].length +
-          " " +
-          NumWord(packets[x - 1].length, ["пакет", "пакета", "пакетов"]) +
-          ")"
-      );
-    });
+    }
 
-    // Set click handlers
-    $("#NetworkPlayPauseButton").click(function () {
-      // If btn-success then start to play
-      if ($(this).hasClass("btn-success")) {
-        $(this).removeClass("btn-success");
-        $(this).addClass("btn-warning");
+    // If we have packets, then we're ready to run
+    if (packets)
+    {
+        $('#NetworkPlayer').empty();
+        $('#NetworkPlayer').append('<button type="button" class="btn btn-danger me-2" id="NetworkStopButton"><i class="bx bx-stop fs-xl"></i></button>');
+        $('#NetworkPlayer').append('<button type="button" class="btn btn-success" id="NetworkPlayPauseButton" onclick="if (typeof window.ym != \'undefined\'){ym(92293993,\'reachGoal\',\'PlayPauseButton\');}"><i class="bx bx-play fs-xl"></i></button>');
+
+        // Init player
+        PacketPlayer.getInstance().InitPlayer(packets);
+
+        // Configure the slider
+        $('#PacketSliderInput')[0].noUiSlider.updateOptions({
+            start: [1],
+            range: {
+                'min': 1,
+                'max': packets.length,
+            },
+            format: {
+                to: function (val){return '' + val},
+                from: function (val){return '' + val},
+            },
+            tooltips: false,
+        });
 
-        $(this).empty();
-        $(this).append('<i class="bx bx-pause fs-xl"></i>');
+        // Show Slider on
+        $('#PacketSliderInput').show();
 
-        // If not in pause. Draw a new layout and go.
-        if (!PacketPlayer.getInstance().getPlayerPause()) {
-          DrawGraphStatic(nodes, edges);
-        }
+        const pkt_count = packets.reduce((currentCount, row) => currentCount + row.length, 0);
+        $('#NetworkPlayerLabel').text(packets.length + ' ' + NumWord(packets.length, ['шаг', 'шага', 'шагов']) + ' / ' + pkt_count + ' ' + NumWord(pkt_count, ['пакет', 'пакета', 'пакетов']));
 
-        PacketPlayer.getInstance().setAnimationTrafficStepCallback(function () {
-          $("#PacketSliderInput")[0].noUiSlider.set(
-            PacketPlayer.getInstance().getAnimationTrafficStep()
-          );
+        $('#PacketSliderInput')[0].noUiSlider.on('slide', function (e) {
+            if (!e) return;
+            let x =  Math.round(e[0]);
+            PacketPlayer.getInstance().setAnimationTrafficStep(x-1);
         });
 
-        PacketPlayer.getInstance().StartPlayer(global_cy);
-        return;
-      } else {
-        $(this).removeClass("btn-warning");
-        $(this).addClass("btn-success");
-        $(this).empty();
-        $(this).append('<i class="bx bx-play fs-xl"></i>');
+        $('#PacketSliderInput')[0].noUiSlider.on('update', function (e) {
+            if (!e) return;
+            let x =  Math.round(e[0]);
+            if (packets.length === 0){
+                $('#NetworkPlayerLabel').text('0 пакетов');
+                return;
+            }
+            $('#NetworkPlayerLabel').text('Шаг: ' + x + '/' + packets.length + ' (' +  packets[x-1].length + ' ' + NumWord(packets[x-1].length, ['пакет', 'пакета', 'пакетов']) + ')');
+        });
 
-        PacketPlayer.getInstance().PausePlayer();
-        return;
-      }
-    });
+        // Set click handlers
+        $('#NetworkPlayPauseButton').click(function() {
 
-    $("#NetworkStopButton").click(function () {
-      PacketPlayer.getInstance().resetAnimationTrafficStepCallback();
-      PacketPlayer.getInstance().StopPlayer();
+            // If btn-success then start to play
+            if ($(this).hasClass("btn-success")){
+                $(this).removeClass('btn-success');
+                $(this).addClass('btn-warning');
 
-      // Reset slider.
-      $("#PacketSliderInput")[0].noUiSlider.set(0);
+                $(this).empty();
+                $(this).append('<i class="bx bx-pause fs-xl"></i>');
 
-      DrawGraph(nodes, edges);
+                // If not in pause. Draw a new layout and go.
+                if (!PacketPlayer.getInstance().getPlayerPause())
+                {
+                    DrawGraphStatic(nodes, edges);
+                }
 
-      $("#NetworkPlayPauseButton").removeClass("btn-success");
-      $("#NetworkPlayPauseButton").removeClass("btn-warning");
-      $("#NetworkPlayPauseButton").empty();
-      $("#NetworkPlayPauseButton").addClass("btn-success");
-      $("#NetworkPlayPauseButton").append('<i class="bx bx-play fs-xl"></i>');
-      return;
-    });
+                PacketPlayer.getInstance().setAnimationTrafficStepCallback(function() {
+                    $('#PacketSliderInput')[0].noUiSlider.set(PacketPlayer.getInstance().getAnimationTrafficStep());
+                });
 
-    return;
-  }
-
-  // No packets.
-  // The network is simulating?
-  if (simultaion_id) {
-    $("#NetworkPlayer").empty();
-    $("#PacketSliderInput").hide();
-    $("#NetworkPlayer").append(
-      '<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Эмулируется...</button>'
-    );
-    InsertWaitingTime();
-    CheckSimulation(simultaion_id);
-    return;
-  }
-
-  // No packets and no simulation.
-  // Add emulation button.
-  $("#NetworkPlayer").empty();
-  $("#PacketSliderInput").hide();
-  $("#NetworkPlayer").append(
-    '<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton">Эмулировать</button>'
-  );
-  $("#NetworkPlayerLabel").empty();
-
-  $("#NetworkEmulateButton").click(function () {
-    // Check for job. If no job - show modal and exit.
-    if (!jobs.length) {
-      $("#noJobsModal").modal("toggle");
-      return;
-    }
+                PacketPlayer.getInstance().StartPlayer(global_cy);
+                return;
+            } else {
+
+                $(this).removeClass('btn-warning');
+                $(this).addClass('btn-success');
+                $(this).empty();
+                $(this).append('<i class="bx bx-play fs-xl"></i>');
+
+                PacketPlayer.getInstance().PausePlayer();
+                return;
+            }
+        });
+
+        $('#NetworkStopButton').click(function() {
+
+            PacketPlayer.getInstance().resetAnimationTrafficStepCallback();
+            PacketPlayer.getInstance().StopPlayer();
 
-    if (nodes.length > 80) {
-      $("#tooManyHostModal").modal("toggle");
-      return;
+            // Reset slider.
+            $('#PacketSliderInput')[0].noUiSlider.set(0);
+
+            DrawGraph(nodes, edges);
+
+            $('#NetworkPlayPauseButton').removeClass('btn-success');
+            $('#NetworkPlayPauseButton').removeClass('btn-warning');
+            $('#NetworkPlayPauseButton').empty();
+            $('#NetworkPlayPauseButton').addClass('btn-success');
+            $('#NetworkPlayPauseButton').append('<i class="bx bx-play fs-xl"></i>');
+            return;
+        });
+
+        return;
     }
 
-    if (typeof window.ym != "undefined") {
-      ym(92293993, "reachGoal", "NetworkEmulate");
+    // No packets.
+    // The network is simulating?
+    if (simulation_id) {
+        $('#NetworkPlayer').empty();
+        $('#PacketSliderInput').hide();
+        $('#NetworkPlayer').append('<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Эмулируется...</button>');
+        InsertWaitingTime()
+        CheckSimulation(simulation_id);
+        return;
     }
 
-    RunSimulation(network_guid);
+    // No packets and no simulation.
+    // Add emulation button.
+    $('#NetworkPlayer').empty();
+    $('#PacketSliderInput').hide();
+    $('#NetworkPlayer').append('<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton">Эмулировать</button>');
+    $('#NetworkPlayerLabel').empty();
+
+    $('#NetworkEmulateButton').click(function() {
+
+        // Check for job. If no job - show modal and exit.
+        if (!jobs.length)
+        {
+            $('#noJobsModal').modal('toggle');
+            return;
+        }
+
+        if (nodes.length > 80)
+        {
+            $('#tooManyHostModal').modal('toggle');
+            return;
+        }
+
+        if (typeof window.ym != 'undefined')
+        {
+            ym(92293993,'reachGoal','NetworkEmulate');
+        }
+
+        RunSimulation(network_guid);
+
+        $('#NetworkPlayer').empty();
+        $('#NetworkPlayer').append('<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Эмулируется...</button>');
+        InsertWaitingTime();
+        return;
+    });
 
-    $("#NetworkPlayer").empty();
-    $("#NetworkPlayer").append(
-      '<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Эмулируется...</button>'
-    );
-    InsertWaitingTime();
     return;
-  });
 
-  return;
-};
+}
 
 // 2 states:
 // No packets - disable button.
 // We have a packets and ready to play packets
-const SetSharedNetworkPlayerState = function () {
-  // If we have packets, then we're ready to run
-  if (packets) {
-    $("#NetworkPlayer").empty();
-    $("#NetworkPlayer").append(
-      '<button type="button" class="btn btn-danger me-2" id="NetworkStopButton"><i class="bx bx-stop fs-xl"></i></button>'
-    );
-    $("#NetworkPlayer").append(
-      '<button type="button" class="btn btn-success" id="NetworkPlayPauseButton" onclick="if (typeof window.ym != \'undefined\'){ym(92293993,\'reachGoal\',\'PlayPauseButton\');}"><i class="bx bx-play fs-xl"></i></button>'
-    );
-
-    // Init player
-    PacketPlayer.getInstance().InitPlayer(packets);
-
-    // Configure the slider
-    $("#PacketSliderInput")[0].noUiSlider.updateOptions({
-      start: [1],
-      range: {
-        min: 1,
-        max: packets.length,
-      },
-      format: {
-        to: function (val) {
-          return "" + val;
-        },
-        from: function (val) {
-          return "" + val;
-        },
-      },
-      tooltips: false,
-    });
-
-    // Show Slider on
-    $("#PacketSliderInput").show();
-
-    const pkt_count = packets.reduce(
-      (currentCount, row) => currentCount + row.length,
-      0
-    );
-    $("#NetworkPlayerLabel").text(
-      packets.length +
-        " " +
-        NumWord(packets.length, ["шаг", "шага", "шагов"]) +
-        " / " +
-        pkt_count +
-        " " +
-        NumWord(pkt_count, ["пакет", "пакета", "пакетов"])
-    );
-
-    $("#PacketSliderInput")[0].noUiSlider.on("slide", function (e) {
-      if (!e) return;
-      let x = Math.round(e[0]);
-      PacketPlayer.getInstance().setAnimationTrafficStep(x - 1);
-    });
+const SetSharedNetworkPlayerState = function()
+{
+
+    // If we have packets, then we're ready to run
+    if (packets)
+    {
+        $('#NetworkPlayer').empty();
+        $('#NetworkPlayer').append('<button type="button" class="btn btn-danger me-2" id="NetworkStopButton"><i class="bx bx-stop fs-xl"></i></button>');
+        $('#NetworkPlayer').append('<button type="button" class="btn btn-success" id="NetworkPlayPauseButton" onclick="if (typeof window.ym != \'undefined\'){ym(92293993,\'reachGoal\',\'PlayPauseButton\');}"><i class="bx bx-play fs-xl"></i></button>');
+
+        // Init player
+        PacketPlayer.getInstance().InitPlayer(packets);
+
+        // Configure the slider
+        $('#PacketSliderInput')[0].noUiSlider.updateOptions({
+            start: [1],
+            range: {
+                'min': 1,
+                'max': packets.length,
+            },
+            format: {
+                to: function (val){return '' + val},
+                from: function (val){return '' + val},
+            },
+            tooltips: false,
+        });
 
-    $("#PacketSliderInput")[0].noUiSlider.on("update", function (e) {
-      if (!e) return;
-      let x = Math.round(e[0]);
-      if (packets.length === 0) {
-        $("#NetworkPlayerLabel").text("0 пакетов");
-        return;
-      }
-      $("#NetworkPlayerLabel").text(
-        "Шаг: " +
-          x +
-          "/" +
-          packets.length +
-          " (" +
-          packets[x - 1].length +
-          " " +
-          NumWord(packets[x - 1].length, ["пакет", "пакета", "пакетов"]) +
-          ")"
-      );
-    });
+        // Show Slider on
+        $('#PacketSliderInput').show();
 
-    // Set click handlers
-    $("#NetworkPlayPauseButton").click(function () {
-      // If btn-success then start to play
-      if ($(this).hasClass("btn-success")) {
-        $(this).removeClass("btn-success");
-        $(this).addClass("btn-warning");
+        const pkt_count = packets.reduce((currentCount, row) => currentCount + row.length, 0);
+        $('#NetworkPlayerLabel').text(packets.length + ' ' + NumWord(packets.length, ['шаг', 'шага', 'шагов']) + ' / ' + pkt_count + ' ' + NumWord(pkt_count, ['пакет', 'пакета', 'пакетов']));
 
-        $(this).empty();
-        $(this).append('<i class="bx bx-pause fs-xl"></i>');
+        $('#PacketSliderInput')[0].noUiSlider.on('slide', function (e) {
+            if (!e) return;
+            let x =  Math.round(e[0]);
+            PacketPlayer.getInstance().setAnimationTrafficStep(x-1);
+        });
 
-        // If not in pause. Draw a new layout and go.
-        if (!PacketPlayer.getInstance().getPlayerPause()) {
-          DrawGraphStatic(nodes, edges);
-        }
+        $('#PacketSliderInput')[0].noUiSlider.on('update', function (e) {
+            if (!e) return;
+            let x =  Math.round(e[0]);
+            if (packets.length === 0){
+                $('#NetworkPlayerLabel').text('0 пакетов');
+                return;
+            }
+            $('#NetworkPlayerLabel').text('Шаг: ' + x + '/' + packets.length + ' (' +  packets[x-1].length + ' ' + NumWord(packets[x-1].length, ['пакет', 'пакета', 'пакетов']) + ')');
+        });
 
-        PacketPlayer.getInstance().setAnimationTrafficStepCallback(function () {
-          $("#PacketSliderInput")[0].noUiSlider.set(
-            PacketPlayer.getInstance().getAnimationTrafficStep()
-          );
+        // Set click handlers
+        $('#NetworkPlayPauseButton').click(function() {
+
+            // If btn-success then start to play
+            if ($(this).hasClass("btn-success")){
+                $(this).removeClass('btn-success');
+                $(this).addClass('btn-warning');
+
+                $(this).empty();
+                $(this).append('<i class="bx bx-pause fs-xl"></i>');
+
+                // If not in pause. Draw a new layout and go.
+                if (!PacketPlayer.getInstance().getPlayerPause())
+                {
+                    DrawGraphStatic(nodes, edges);
+                }
+
+                PacketPlayer.getInstance().setAnimationTrafficStepCallback(function() {
+                    $('#PacketSliderInput')[0].noUiSlider.set(PacketPlayer.getInstance().getAnimationTrafficStep());
+                });
+
+                PacketPlayer.getInstance().StartPlayer(global_cy);
+            } else {
+                $(this).removeClass('btn-warning');
+                $(this).addClass('btn-success');
+                $(this).empty();
+                $(this).append('<i class="bx bx-play fs-xl"></i>');
+
+                PacketPlayer.getInstance().PausePlayer();
+                return;
+            }
         });
 
-        PacketPlayer.getInstance().StartPlayer(global_cy);
-      } else {
-        $(this).removeClass("btn-warning");
-        $(this).addClass("btn-success");
-        $(this).empty();
-        $(this).append('<i class="bx bx-play fs-xl"></i>');
+        $('#NetworkStopButton').click(function() {
 
-        PacketPlayer.getInstance().PausePlayer();
-        return;
-      }
-    });
+            PacketPlayer.getInstance().resetAnimationTrafficStepCallback();
+            PacketPlayer.getInstance().StopPlayer();
 
-    $("#NetworkStopButton").click(function () {
-      PacketPlayer.getInstance().resetAnimationTrafficStepCallback();
-      PacketPlayer.getInstance().StopPlayer();
+            // Reset slider.
+            $('#PacketSliderInput')[0].noUiSlider.set(0);
 
-      // Reset slider.
-      $("#PacketSliderInput")[0].noUiSlider.set(0);
+            DrawSharedGraph(nodes, edges);
 
-      DrawSharedGraph(nodes, edges);
+            $('#NetworkPlayPauseButton').removeClass('btn-success');
+            $('#NetworkPlayPauseButton').removeClass('btn-warning');
+            $('#NetworkPlayPauseButton').empty();
+            $('#NetworkPlayPauseButton').addClass('btn-success');
+            $('#NetworkPlayPauseButton').append('<i class="bx bx-play fs-xl"></i>');
+            return;
+        });
 
-      $("#NetworkPlayPauseButton").removeClass("btn-success");
-      $("#NetworkPlayPauseButton").removeClass("btn-warning");
-      $("#NetworkPlayPauseButton").empty();
-      $("#NetworkPlayPauseButton").addClass("btn-success");
-      $("#NetworkPlayPauseButton").append('<i class="bx bx-play fs-xl"></i>');
-      return;
-    });
+        return;
+    }
 
+    // No packets
+    // Add info button
+    $('#NetworkPlayer').empty();
+    $('#PacketSliderInput').hide();
+    $('#NetworkPlayerLabel').empty();
+    $('#NetworkPlayer').append('<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Нет эмуляции</button>');
     return;
-  }
-
-  // No packets
-  // Add info button
-  $("#NetworkPlayer").empty();
-  $("#PacketSliderInput").hide();
-  $("#NetworkPlayerLabel").empty();
-  $("#NetworkPlayer").append(
-    '<button type="button" class="btn btn-primary w-100" id="NetworkEmulateButton" disabled>Нет эмуляции</button>'
-  );
-  return;
-};
+}
 
 // Take a picture and update it.
-const TakeGraphPictureAndUpdate = function () {
-  if (!global_cy) {
-    return;
-  }
-
-  let png_blob = global_cy.png({
-    output: "blob",
-    maxWidth: 512,
-    maxHeight: 512,
-  });
-
-  $.ajax({
-    type: "POST",
-    url: "/network/upload_network_picture?guid=" + network_guid,
-    data: png_blob,
-    processData: false,
-    error: function (xhr) {
-      if (xhr.status != 200) {
-        console.log("Cannot upload graph picture");
-      }
-    },
-    dataType: "image/png",
-  });
-};
+const TakeGraphPictureAndUpdate = function()
+{
+    if (!global_cy)
+    {
+        return;
+    }
+
+    let png_blob = global_cy.png({output: 'blob', maxWidth: 512, maxHeight: 512});
+
+    $.ajax({
+        type: 'POST',
+        url: '/network/upload_network_picture?guid=' + network_guid,
+        data: png_blob,
+        processData: false,
+        error: function(xhr) {
+
+            if (xhr.status != 200){
+                console.log('Cannot upload graph picture');
+            }
+
+        },
+        dataType: 'image/png'
+    });
+}
 
 // Calculate drop offsets
-const CalculateDropOffset = function (elem_x, elem_y) {
-  const network_scheme = document.getElementById("network_scheme");
-  let offset_left = 0;
-  let offset_top = 0;
-  let ret = { x: 0, y: 0 };
+const CalculateDropOffset = function(elem_x, elem_y)
+{
+    const network_scheme = document.getElementById("network_scheme");
+    let offset_left = 0;
+    let offset_top = 0;
+    let ret = {'x' : 0, 'y' : 0};
+
+    console.log(elem_x + ", " + elem_y);
+
+    if (network_scheme){
+        ret.x += network_scheme.offsetLeft - 25;
+        ret.y += network_scheme.offsetTop - 15;
+    }
 
-  console.log(elem_x + ", " + elem_y);
+    if (global_cy)
+    {
+        ret.x = ret.x + global_cy.pan().x;
+        ret.y = ret.y + global_cy.pan().y;
 
-  if (network_scheme) {
-    ret.x += network_scheme.offsetLeft - 25;
-    ret.y += network_scheme.offsetTop - 15;
-  }
+        ret.x = (elem_x - ret.x) / global_cy.zoom();
+        ret.y = (elem_y - ret.y) / global_cy.zoom();
+    }
 
-  if (global_cy) {
-    ret.x = ret.x + global_cy.pan().x;
-    ret.y = ret.y + global_cy.pan().y;
+    return ret;
+}
 
-    ret.x = (elem_x - ret.x) / global_cy.zoom();
-    ret.y = (elem_y - ret.y) / global_cy.zoom();
-  }
+const UpdateNetworkConfig = function()
+{
+    if (!global_cy){
+        return;
+    }
 
-  return ret;
-};
+    let data = {'network_title' : network_title, 'network_description' : network_description,
+    'zoom' : global_cy.zoom(),'pan_x' : global_cy.pan().x, 'pan_y' : global_cy.pan().y};
 
-const UpdateNetworkConfig = function () {
-  if (!global_cy) {
-    return;
-  }
-
-  let data = {
-    network_title: network_title,
-    network_description: network_description,
-    zoom: global_cy.zoom(),
-    pan_x: global_cy.pan().x,
-    pan_y: global_cy.pan().y,
-  };
+    $.ajax({
+        type: 'POST',
+        url: '/network/update_network_config?guid=' + network_guid,
+        data: JSON.stringify(data),
+        contentType: "application/json; charset=utf-8",
+        success: function(data, textStatus, xhr) {
+        },
+        error: function(xhr) {
+            console.log('Cannot update network config');
+            console.log(xhr);
+        },
+        dataType: 'json'
+    });
 
-  $.ajax({
-    type: "POST",
-    url: "/network/update_network_config?guid=" + network_guid,
-    data: JSON.stringify(data),
-    contentType: "application/json; charset=utf-8",
-    success: function (data, textStatus, xhr) {},
-    error: function (xhr) {
-      console.log("Cannot update network config");
-      console.log(xhr);
-    },
-    dataType: "json",
-  });
-};
+}
+
+const CopyNetwork = function ()
+{
+    $.ajax({
+        type: 'POST',
+        url: '/network/copy_network?guid=' + network_guid,
+        data: '',
+        success: function(data, textStatus, xhr) {
+            if (xhr.status === 200)
+            {
+                console.log("Copy network is made.");
+                $('#ModalCopy').modal('show');
+                $('.modal-option').click(function() {
+                var selectedOption = $(this).attr('data-option');
+                    if (selectedOption === 'edit') {
+                        var newUrl = data.new_url;
+                        window.location.href = newUrl;
+                        console.log('Go to editing');
+                    } else if (selectedOption === 'continue') {
+                        console.log('Continue here');
+                    }
+                $('#ModalCopy').modal('hide');
+                });
+            }
+        },
+        error: function(err) {
+            console.log('Copy has not been made.');
+        },
+        contentType: "application/json",
+        dataType: 'json'
+    });
+}
 
-const CopyNetwork = function () {
-  $.ajax({
-    type: "POST",
-    url: "/network/copy_network?guid=" + network_guid,
-    data: "",
-    success: function (data, textStatus, xhr) {
-      if (xhr.status === 200) {
-        console.log("Copy network is made.");
-        $("#ModalCopy").modal("show");
-        $(".modal-option").click(function () {
-          var selectedOption = $(this).attr("data-option");
-          if (selectedOption === "edit") {
-            var newUrl = data.new_url;
-            window.location.href = newUrl;
-            console.log("Go to editing");
-          } else if (selectedOption === "continue") {
-            console.log("Continue here");
-          }
-          $("#ModalCopy").modal("hide");
-        });
-      }
-    },
-    error: function (err) {
-      console.log("Copy has not been made.");
-    },
-    contentType: "application/json",
-    dataType: "json",
-  });
-};
 
-const NumWord = function (value, words) {
-  value = Math.abs(value) % 100;
-  var num = value % 10;
-  if (value > 10 && value < 20) return words[2];
-  if (num > 1 && num < 5) return words[1];
-  if (num == 1) return words[0];
-  return words[2];
-};
+const NumWord = function (value, words){
+    value = Math.abs(value) % 100;
+    var num = value % 10;
+    if(value > 10 && value < 20) return words[2];
+    if(num > 1 && num < 5) return words[1];
+    if(num == 1) return words[0];
+    return words[2];
+}
 
-const SaveNetworkObject = function () {
-  let n = JSON.parse(JSON.stringify(nodes));
-  let e = JSON.parse(JSON.stringify(edges));
+const SaveNetworkObject = function (){
+    let n = JSON.parse(JSON.stringify(nodes));
+    let e = JSON.parse(JSON.stringify(edges));
 
-  NetworkCache.push({
-    nodes: n,
-    edges: e,
-  });
+    NetworkCache.push({
+        nodes: n,
+        edges: e,
+    });
 
-  return 0;
-};
+    return 0;
+}
 
-const RestoreNetworkObject = function () {
-  let x = NetworkCache.pop();
+const RestoreNetworkObject = function (){
+    let x = NetworkCache.pop();
 
-  if (!x) {
-    return;
-  }
+    if (!x){
+        return;
+    }
 
-  nodes = x.nodes;
-  edges = x.edges;
+    nodes=x.nodes;
+    edges=x.edges;
 
-  return 0;
-};
+    return 0;
+}

From 77c103b7562525c3b2eaf2ffab51e32a639d1ad1 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Mon, 17 Nov 2025 18:32:53 +0300
Subject: [PATCH 25/33] feat: load filter states to server; tests WIP

---
 front/src/app.py               |  5 ++-
 front/src/miminet_auth.py      | 28 ++++++++++++++-
 front/src/miminet_model.py     |  3 ++
 front/src/static/netfront_f.js | 51 ++++++++++++++++++++++++++-
 front/src/templates/base.html  | 63 ++++++++++++++++++++++++----------
 5 files changed, 129 insertions(+), 21 deletions(-)

diff --git a/front/src/app.py b/front/src/app.py
index 1a1f1c80..0ddca48a 100644
--- a/front/src/app.py
+++ b/front/src/app.py
@@ -19,6 +19,7 @@
     CreateCheckTaskView,
 )
 from miminet_auth import (
+    animation_filters,
     google_callback,
     google_login,
     insert_test_user,
@@ -158,7 +159,9 @@
     view_func=upload_network_picture,
 )
 app.add_url_rule("/network/copy_network", methods=["POST"], view_func=copy_network)
-
+app.add_url_rule(
+    "/user/animation_filters", methods=["GET", "POST"], view_func=animation_filters
+)
 # Simulation
 app.add_url_rule("/run_simulation", methods=["POST"], view_func=run_simulation)
 app.add_url_rule("/check_simulation", methods=["GET"], view_func=check_simulation)
diff --git a/front/src/miminet_auth.py b/front/src/miminet_auth.py
index 8012655c..cd8b2533 100644
--- a/front/src/miminet_auth.py
+++ b/front/src/miminet_auth.py
@@ -9,7 +9,7 @@
 
 import google.auth.transport.requests
 import requests
-from flask import flash, redirect, render_template, request, session, url_for
+from flask import flash, redirect, render_template, request, session, url_for, jsonify
 from flask_login import (
     LoginManager,
     current_user,
@@ -155,6 +155,32 @@ def user_profile():
     return render_template("auth/profile.html", user=user)
 
 
+@login_required
+def animation_filters():
+    user = User.query.filter_by(id=current_user.id).first()
+
+    if request.method == "POST":
+        payload = request.get_json(silent=True) or {}
+
+        if "hide_arp" in payload:
+            user.animation_hide_arp = bool(payload.get("hide_arp"))
+
+        if "hide_stp" in payload:
+            user.animation_hide_stp = bool(payload.get("hide_stp"))
+
+        db.session.commit()
+
+    return (
+        jsonify(
+            {
+                "hide_arp": bool(user.animation_hide_arp),
+                "hide_stp": bool(user.animation_hide_stp),
+            }
+        ),
+        200,
+    )
+
+
 def password_recovery():
     return render_template("auth/password_recovery.html")
 
diff --git a/front/src/miminet_model.py b/front/src/miminet_model.py
index 1b59d313..f77b9e49 100644
--- a/front/src/miminet_model.py
+++ b/front/src/miminet_model.py
@@ -38,6 +38,9 @@ class User(db.Model, UserMixin):  # type:ignore[name-defined]
     yandex_id = db.Column(Text, nullable=True)
     tg_id = db.Column(Text, nullable=True)
 
+    animation_hide_arp = db.Column(Boolean, default=False, nullable=False)
+    animation_hide_stp = db.Column(Boolean, default=False, nullable=False)
+
 
 class Network(db.Model):  # type:ignore[name-defined]
     id = db.Column(BigInteger, primary_key=True, autoincrement=True)
diff --git a/front/src/static/netfront_f.js b/front/src/static/netfront_f.js
index 48daadf8..7743b96d 100644
--- a/front/src/static/netfront_f.js
+++ b/front/src/static/netfront_f.js
@@ -1827,11 +1827,60 @@ const FilterPackets = function () {
             .filter((step) => step.length > 0);
 };
 
-const ResetFilterStates = function () {
+const SetFilterCheckboxes= function () {
     $("#ARPFilterCheckbox").prop("checked", filterState.hideARP);
     $("#STPFilterCheckbox").prop("checked", filterState.hideSTP);
 };
 
+const UpdateFilterStates = function (settings) {
+    if (!settings) {
+        return;
+    }
+
+    filterState.hideARP = Boolean(settings.hideARP);
+    filterState.hideSTP = Boolean(settings.hideSTP);
+    SetFilterCheckboxes();
+};
+
+const SaveAnimationFilters = function () {
+    if (!window.MIMINET || window.MIMINET.isAuthenticated !== true) {
+        return;
+    }
+
+    const payload = {
+        hide_arp: $("#ARPFilterCheckbox").is(":checked"),
+        hide_stp: $("#STPFilterCheckbox").is(":checked"),
+    };
+
+    $.ajax({
+        type: "POST",
+        url: "/user/animation_filters",
+        data: JSON.stringify(payload),
+        contentType: "application/json; charset=utf-8",
+        success: function (data) {
+            if (!window.MIMINET) {
+                return;
+            }
+
+            const currentFilters = filterState || {};
+            currentFilters.hideARP = Boolean(
+                data && Object.prototype.hasOwnProperty.call(data, "hide_arp")
+                    ? data.hide_arp
+                    : payload.hide_arp
+            );
+            currentFilters.hideSTP = Boolean(
+                data && Object.prototype.hasOwnProperty.call(data, "hide_stp")
+                    ? data.hide_stp
+                    : payload.hide_stp
+            );
+            filterState = currentFilters;
+        },
+        error: function (xhr) {
+            console.log("Cannot save animation filters");
+            console.log(xhr);
+        },
+    });
+};
 
 const SetPacketFilter = function () {
     console.log("Packet filter call");
diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index 432be78e..c6d217de 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -120,28 +120,34 @@
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="netConfigModalLabel">Настройки сети</h5>
+                    <h5 class="modal-title" id="netConfigModalLabel">Настройки</h5>
                     <button id="networkConfigurationCancelIcon" type="button" class="btn-close" data-dismiss="modal" aria-label="Закрыть">
                     </button>
                 </div>
                 <div class="modal-body">
                     <form id="networkConfigurationForm" method="POST" action="">
                         <div class="form-group">
+                            <h6>Сеть</h6>
                             <label for="network_title" class="text-sm">Название сети</label>
                             <input type="text" class="form-control form-control-sm" id="network_title" name="network_title" value='{{ network.title }}' {{ 'disabled' if request.path == url_for('web_network_shared') else '' }}>
 
                             <label for="network_description" class="text-sm pt-2">Описание сети</label>
                             <textarea rows="3" class="form-control form-control-sm" id="network_description" name="network_description" {{ 'disabled' if request.path == url_for('web_network_shared') else '' }}>{{ network.description }}</textarea>
                         </div>
-                            <hr class="my-3">
-                            <h6>Настройки анимации</h6>
                         <div>
-                            <input class="form-check-input" role="switch" type="checkbox" id="ARPFilterCheckbox" name="ARPFilterCheckbox">
-                            <label for="ARPFilterCheckbox"> Пропустить ARP пакеты </label>
+                            <hr class="my-3">
+                            <h6>Анимация</h6>
+                            <label for="animation_settings">Эти настройки применяются для всех сетей.</label>
                         </div>
-                        <div>
-                            <input class="form-check-input" role="switch" type="checkbox" id="STPFilterCheckbox" name="STPFilterCheckbox">
-                            <label for="STPFilterCheckbox"> Пропустить STP/RSTP пакеты </label>
+                        <div name="animation_settings">
+                            <div>
+                                <input class="form-check-input" role="switch" type="checkbox" id="ARPFilterCheckbox" name="ARPFilterCheckbox">
+                                <label for="ARPFilterCheckbox">Не анимировать ARP пакеты </label>
+                            </div>
+                            <div>
+                                <input class="form-check-input" role="switch" type="checkbox" id="STPFilterCheckbox" name="STPFilterCheckbox">
+                                <label for="STPFilterCheckbox">Не анимировать STP/RSTP пакеты </label>
+                            </div>
                         </div>
                     </form>
                 </div>
@@ -151,7 +157,6 @@ <h6>Настройки анимации</h6>
                         href="#deleteNetConfirmModal">
                         Удалить сеть
                     </button>
-                    <button id="networkDeleteButton" type="button" data-toggle="modal" class="btn btn-danger" href="#deleteNetConfirmModal">Удалить сеть</button>
                     <button id="networkConfigurationCancel" type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                     <button id="networkConfigurationSubmit" type="button" class="btn btn-primary">Сохранить</button>
                 </div>
@@ -293,23 +298,39 @@ <h6 class="mb-2">Наше компьюнити</h6>
 <script src="{{ url_for('static', filename='/miminet_animation.js') }}"></script>
 
 <script>
+    window.MIMINET = window.MIMINET || {};
+    window.MIMINET.isAuthenticated = {{ current_user.is_authenticated|tojson }};
+
     $(document).ready(function() {
-<<<<<<< HEAD
-        $("#netConfigModal").on("hidden.bs.modal", function() {
-            RecoverFilterStates();
-        })
+        const serverAnimationFilters = filterState = {{ {
+            "hideARP": current_user.is_authenticated and current_user.animation_hide_arp,
+            "hideSTP": current_user.is_authenticated and current_user.animation_hide_stp,
+        } | tojson }};
+
+        if (typeof UpdateFilterStates === "function") {
+            UpdateFilterStates(serverAnimationFilters);
+            if (packets) {
+                SetPacketFilter();
+            }
+        }
+
+        const resetAnimationFilters = function () {
+            if (typeof UpdateFilterStates !== "function") {
+                return;
+            }
+
+            const storedFilters = filterState || serverAnimationFilters;
+            UpdateFilterStates(storedFilters);
+        };
 
-        $("#networkConfigrationCancel").click(function(){
-||||||| 15bb04e
-        $("#networkConfigrationCancel").click(function(){
-=======
         $("#networkConfigurationCancel").click(function(){
->>>>>>> main
             $('#netConfigModal').modal('hide');
+            resetAnimationFilters();
         });
 
         $("#networkConfigurationCancelIcon").click(function(){
             $('#netConfigModal').modal('hide');
+            resetAnimationFilters();
         });
 
         $("#networkConfigurationSubmit").click(function(){
@@ -317,6 +338,9 @@ <h6 class="mb-2">Наше компьюнити</h6>
             network_description = $("#network_description").val();
             UpdateNetworkConfig();
             SetPacketFilter();
+            if (window.MIMINET.isAuthenticated && typeof SaveAnimationFilters === "function") {
+                SaveAnimationFilters();
+            }
             $('#netConfigModal').modal('hide');
             $('#network_title_head').text(network_title);
         });
@@ -328,6 +352,9 @@ <h6 class="mb-2">Наше компьюнити</h6>
                 network_description = $("#network_description").val();
                 UpdateNetworkConfig();
                 SetPacketFilter();
+                if (window.MIMINET.isAuthenticated && typeof SaveAnimationFilters === "function") {
+                    SaveAnimationFilters();
+                }
                 $('#netConfigModal').modal('hide');
                 $('#network_title_head').text(network_title);
                 return false;

From 8840d8e9f0e5d83835f5df780449cf73c9071d4c Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Mon, 17 Nov 2025 19:10:33 +0300
Subject: [PATCH 26/33] fix: fixed restoring filter values on modal close

---
 front/src/templates/base.html      | 11 ++++++++---
 front/tests/test_packet_filters.py | 30 ++++++++++++++++++------------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index c6d217de..f7b80543 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -302,14 +302,14 @@ <h6 class="mb-2">Наше компьюнити</h6>
     window.MIMINET.isAuthenticated = {{ current_user.is_authenticated|tojson }};
 
     $(document).ready(function() {
-        const serverAnimationFilters = filterState = {{ {
+        const serverAnimationFilters = window.MIMINET.animationFilters = {{ {
             "hideARP": current_user.is_authenticated and current_user.animation_hide_arp,
             "hideSTP": current_user.is_authenticated and current_user.animation_hide_stp,
         } | tojson }};
 
         if (typeof UpdateFilterStates === "function") {
             UpdateFilterStates(serverAnimationFilters);
-            if (packets) {
+            if (typeof packets !== "undefined" && packets) {
                 SetPacketFilter();
             }
         }
@@ -319,7 +319,8 @@ <h6 class="mb-2">Наше компьюнити</h6>
                 return;
             }
 
-            const storedFilters = filterState || serverAnimationFilters;
+            const storedFilters =
+                window.MIMINET.animationFilters || serverAnimationFilters;
             UpdateFilterStates(storedFilters);
         };
 
@@ -361,6 +362,10 @@ <h6 class="mb-2">Наше компьюнити</h6>
             }
         });
 
+        $('#netConfigModal').on('hidden.bs.modal', function () {
+            resetAnimationFilters();
+        });
+
         $("#networkDeleteButton").click(function(){
             $('#netConfigModal').modal('hide');
             $('#deleteNetConfirmModal').modal('toggle');
diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index b31ea948..fd496a99 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -85,9 +85,9 @@ def test_enable_arp_filter_filters_packets(
         assert filtered_packets[0][0]["data"]["label"] == "ICMP packet"
 
         self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "ARPFilterCheckbox") is True
-        ), "ARP checkbox should remain selected after saving"
+        assert self._checkbox_state(selenium, "ARPFilterCheckbox") is True, (
+            "ARP checkbox should remain selected after saving"
+        )
         self._close_settings_modal(selenium)
 
     def test_cancel_does_not_change_filter_state(
@@ -104,14 +104,14 @@ def test_cancel_does_not_change_filter_state(
         self._close_settings_modal(selenium)  # close without saving
 
         current_state = selenium.execute_script("return filterState.hideARP === true;")
-        assert (
-            current_state == initial_state
-        ), "Filter state must not change when closing without saving"
+        assert current_state == initial_state, (
+            "Filter state must not change when closing without saving"
+        )
 
         self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state
-        ), "ARP checkbox should display the original value after cancel"
+        assert self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state, (
+            "ARP checkbox should display the original value after cancel"
+        )
         self._close_settings_modal(selenium)
 
     def test_enable_stp_filter_filters_packets(
@@ -151,9 +151,9 @@ def test_enable_stp_filter_filters_packets(
         assert filtered_packets[0][0]["data"]["label"] == "ICMP packet"
 
         self._open_settings_modal(selenium)
-        assert (
-            self._checkbox_state(selenium, "STPFilterCheckbox") is True
-        ), "STP checkbox should remain selected after saving"
+        assert self._checkbox_state(selenium, "STPFilterCheckbox") is True, (
+            "STP checkbox should remain selected after saving"
+        )
         self._close_settings_modal(selenium)
 
     def test_disabling_filters_restores_packets(
@@ -209,3 +209,9 @@ def test_disabling_filters_restores_packets(
                 " && packets.length === 2;"
             )
         )
+
+    # TODO: shared network test
+    def test_filtering_shared_network(
+        self, selenium: MiminetTester, network: MiminetTestNetwork
+    ):
+        raise "TODO"

From fdb2d8dc906429ec59ca4ff1af9d725c9910d61f Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Tue, 18 Nov 2025 08:33:44 +0300
Subject: [PATCH 27/33] fix: fixed correctly closing the modal

---
 front/src/templates/base.html      | 11 ++++++++---
 front/tests/test_packet_filters.py |  6 ++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index c6d217de..f7b80543 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -302,14 +302,14 @@ <h6 class="mb-2">Наше компьюнити</h6>
     window.MIMINET.isAuthenticated = {{ current_user.is_authenticated|tojson }};
 
     $(document).ready(function() {
-        const serverAnimationFilters = filterState = {{ {
+        const serverAnimationFilters = window.MIMINET.animationFilters = {{ {
             "hideARP": current_user.is_authenticated and current_user.animation_hide_arp,
             "hideSTP": current_user.is_authenticated and current_user.animation_hide_stp,
         } | tojson }};
 
         if (typeof UpdateFilterStates === "function") {
             UpdateFilterStates(serverAnimationFilters);
-            if (packets) {
+            if (typeof packets !== "undefined" && packets) {
                 SetPacketFilter();
             }
         }
@@ -319,7 +319,8 @@ <h6 class="mb-2">Наше компьюнити</h6>
                 return;
             }
 
-            const storedFilters = filterState || serverAnimationFilters;
+            const storedFilters =
+                window.MIMINET.animationFilters || serverAnimationFilters;
             UpdateFilterStates(storedFilters);
         };
 
@@ -361,6 +362,10 @@ <h6 class="mb-2">Наше компьюнити</h6>
             }
         });
 
+        $('#netConfigModal').on('hidden.bs.modal', function () {
+            resetAnimationFilters();
+        });
+
         $("#networkDeleteButton").click(function(){
             $('#netConfigModal').modal('hide');
             $('#deleteNetConfirmModal').modal('toggle');
diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index a1c9488f..fd496a99 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -209,3 +209,9 @@ def test_disabling_filters_restores_packets(
                 " && packets.length === 2;"
             )
         )
+
+    # TODO: shared network test
+    def test_filtering_shared_network(
+        self, selenium: MiminetTester, network: MiminetTestNetwork
+    ):
+        raise "TODO"

From bd016c20c69fb39ec509295c94b91eeb43aab68b Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Tue, 18 Nov 2025 08:41:23 +0300
Subject: [PATCH 28/33] fix

---
 front/tests/test_packet_filters.py | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index fd496a99..a1c9488f 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -209,9 +209,3 @@ def test_disabling_filters_restores_packets(
                 " && packets.length === 2;"
             )
         )
-
-    # TODO: shared network test
-    def test_filtering_shared_network(
-        self, selenium: MiminetTester, network: MiminetTestNetwork
-    ):
-        raise "TODO"

From da1d9b6242dd76350e46b1adfca6564e335db3d6 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Tue, 18 Nov 2025 09:01:34 +0300
Subject: [PATCH 29/33] fix

---
 front/src/templates/base.html | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index f7b80543..d07f16a7 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -314,6 +314,8 @@ <h6 class="mb-2">Наше компьюнити</h6>
             }
         }
 
+        let shouldResetFilters = true;
+
         const resetAnimationFilters = function () {
             if (typeof UpdateFilterStates !== "function") {
                 return;
@@ -326,11 +328,13 @@ <h6 class="mb-2">Наше компьюнити</h6>
 
         $("#networkConfigurationCancel").click(function(){
             $('#netConfigModal').modal('hide');
+            shouldResetFilters = true;
             resetAnimationFilters();
         });
 
         $("#networkConfigurationCancelIcon").click(function(){
             $('#netConfigModal').modal('hide');
+            shouldResetFilters = true;
             resetAnimationFilters();
         });
 
@@ -343,6 +347,7 @@ <h6 class="mb-2">Наше компьюнити</h6>
                 SaveAnimationFilters();
             }
             $('#netConfigModal').modal('hide');
+            shouldResetFilters = false;
             $('#network_title_head').text(network_title);
         });
 
@@ -357,13 +362,17 @@ <h6 class="mb-2">Наше компьюнити</h6>
                     SaveAnimationFilters();
                 }
                 $('#netConfigModal').modal('hide');
+                shouldResetFilters = false;
                 $('#network_title_head').text(network_title);
                 return false;
             }
         });
 
         $('#netConfigModal').on('hidden.bs.modal', function () {
-            resetAnimationFilters();
+            if (shouldResetFilters) {
+                resetAnimationFilters();
+            }
+            shouldResetFilters = true;
         });
 
         $("#networkDeleteButton").click(function(){

From 7979f58288ed0b2d92d3f014255462dd1bd12842 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Tue, 18 Nov 2025 09:12:07 +0300
Subject: [PATCH 30/33] fix

---
 front/src/static/netfront_f.js |  5 +++++
 front/src/templates/base.html  | 18 ++++++++++--------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/front/src/static/netfront_f.js b/front/src/static/netfront_f.js
index 7743b96d..eccee6a3 100644
--- a/front/src/static/netfront_f.js
+++ b/front/src/static/netfront_f.js
@@ -1900,6 +1900,11 @@ const SetPacketFilter = function () {
         FilterPackets();
         SetNetworkPlayerState(0);
     }
+
+    if (window.MIMINET) {
+        const isResetting = window.MIMINET.isResettingFilters === true;
+        window.MIMINET.shouldResetFiltersOnHide = isResetting;
+    }
 };
 
 // 2 states:
diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index d07f16a7..4b0f7e60 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -300,6 +300,8 @@ <h6 class="mb-2">Наше компьюнити</h6>
 <script>
     window.MIMINET = window.MIMINET || {};
     window.MIMINET.isAuthenticated = {{ current_user.is_authenticated|tojson }};
+    window.MIMINET.shouldResetFiltersOnHide = true;
+    window.MIMINET.isResettingFilters = false;
 
     $(document).ready(function() {
         const serverAnimationFilters = window.MIMINET.animationFilters = {{ {
@@ -314,8 +316,6 @@ <h6 class="mb-2">Наше компьюнити</h6>
             }
         }
 
-        let shouldResetFilters = true;
-
         const resetAnimationFilters = function () {
             if (typeof UpdateFilterStates !== "function") {
                 return;
@@ -324,17 +324,21 @@ <h6 class="mb-2">Наше компьюнити</h6>
             const storedFilters =
                 window.MIMINET.animationFilters || serverAnimationFilters;
             UpdateFilterStates(storedFilters);
+
+            if (typeof SetPacketFilter === "function") {
+                window.MIMINET.isResettingFilters = true;
+                SetPacketFilter();
+                window.MIMINET.isResettingFilters = false;
+            }
         };
 
         $("#networkConfigurationCancel").click(function(){
             $('#netConfigModal').modal('hide');
-            shouldResetFilters = true;
             resetAnimationFilters();
         });
 
         $("#networkConfigurationCancelIcon").click(function(){
             $('#netConfigModal').modal('hide');
-            shouldResetFilters = true;
             resetAnimationFilters();
         });
 
@@ -347,7 +351,6 @@ <h6 class="mb-2">Наше компьюнити</h6>
                 SaveAnimationFilters();
             }
             $('#netConfigModal').modal('hide');
-            shouldResetFilters = false;
             $('#network_title_head').text(network_title);
         });
 
@@ -362,17 +365,16 @@ <h6 class="mb-2">Наше компьюнити</h6>
                     SaveAnimationFilters();
                 }
                 $('#netConfigModal').modal('hide');
-                shouldResetFilters = false;
                 $('#network_title_head').text(network_title);
                 return false;
             }
         });
 
         $('#netConfigModal').on('hidden.bs.modal', function () {
-            if (shouldResetFilters) {
+            if (window.MIMINET.shouldResetFiltersOnHide) {
                 resetAnimationFilters();
             }
-            shouldResetFilters = true;
+            window.MIMINET.shouldResetFiltersOnHide = true;
         });
 
         $("#networkDeleteButton").click(function(){

From 90082235ecf08a230f5fca4e12d38a6a97efc144 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Tue, 18 Nov 2025 09:48:00 +0300
Subject: [PATCH 31/33] fix

---
 front/src/static/netfront_f.js     | 10 +++-------
 front/src/templates/base.html      | 17 +++--------------
 front/tests/test_packet_filters.py | 19 ++++++++++++++++---
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/front/src/static/netfront_f.js b/front/src/static/netfront_f.js
index eccee6a3..0cd95b4f 100644
--- a/front/src/static/netfront_f.js
+++ b/front/src/static/netfront_f.js
@@ -1862,7 +1862,7 @@ const SaveAnimationFilters = function () {
                 return;
             }
 
-            const currentFilters = filterState || {};
+            const currentFilters = window.MIMINET.animationFilters || {};
             currentFilters.hideARP = Boolean(
                 data && Object.prototype.hasOwnProperty.call(data, "hide_arp")
                     ? data.hide_arp
@@ -1873,7 +1873,8 @@ const SaveAnimationFilters = function () {
                     ? data.hide_stp
                     : payload.hide_stp
             );
-            filterState = currentFilters;
+            window.MIMINET.animationFilters = currentFilters;
+            UpdateFilterStates(currentFilters);
         },
         error: function (xhr) {
             console.log("Cannot save animation filters");
@@ -1900,11 +1901,6 @@ const SetPacketFilter = function () {
         FilterPackets();
         SetNetworkPlayerState(0);
     }
-
-    if (window.MIMINET) {
-        const isResetting = window.MIMINET.isResettingFilters === true;
-        window.MIMINET.shouldResetFiltersOnHide = isResetting;
-    }
 };
 
 // 2 states:
diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index 4b0f7e60..b9db8190 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -300,8 +300,6 @@ <h6 class="mb-2">Наше компьюнити</h6>
 <script>
     window.MIMINET = window.MIMINET || {};
     window.MIMINET.isAuthenticated = {{ current_user.is_authenticated|tojson }};
-    window.MIMINET.shouldResetFiltersOnHide = true;
-    window.MIMINET.isResettingFilters = false;
 
     $(document).ready(function() {
         const serverAnimationFilters = window.MIMINET.animationFilters = {{ {
@@ -325,21 +323,19 @@ <h6 class="mb-2">Наше компьюнити</h6>
                 window.MIMINET.animationFilters || serverAnimationFilters;
             UpdateFilterStates(storedFilters);
 
-            if (typeof SetPacketFilter === "function") {
-                window.MIMINET.isResettingFilters = true;
+            if (typeof packets !== "undefined" && packets) {
                 SetPacketFilter();
-                window.MIMINET.isResettingFilters = false;
             }
         };
 
         $("#networkConfigurationCancel").click(function(){
-            $('#netConfigModal').modal('hide');
             resetAnimationFilters();
+            $('#netConfigModal').modal('hide');
         });
 
         $("#networkConfigurationCancelIcon").click(function(){
-            $('#netConfigModal').modal('hide');
             resetAnimationFilters();
+            $('#netConfigModal').modal('hide');
         });
 
         $("#networkConfigurationSubmit").click(function(){
@@ -370,13 +366,6 @@ <h6 class="mb-2">Наше компьюнити</h6>
             }
         });
 
-        $('#netConfigModal').on('hidden.bs.modal', function () {
-            if (window.MIMINET.shouldResetFiltersOnHide) {
-                resetAnimationFilters();
-            }
-            window.MIMINET.shouldResetFiltersOnHide = true;
-        });
-
         $("#networkDeleteButton").click(function(){
             $('#netConfigModal').modal('hide');
             $('#deleteNetConfirmModal').modal('toggle');
diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index a1c9488f..42ea6e62 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -28,10 +28,23 @@ def _open_settings_modal(self, selenium: MiminetTester):
         selenium.wait_until_appear(By.CSS_SELECTOR, "#netConfigModal")
 
     def _save_network_settings(self, selenium: MiminetTester):
-        selenium.execute_script("UpdateNetworkConfig(); SetPacketFilter();")
+        submit_button = selenium.find_element(By.ID, "networkConfigurationSubmit")
+        submit_button.click()
+        selenium.wait_for(
+            lambda driver: driver.execute_script(
+                "return !document.querySelector('#netConfigModal')"
+                " || $('#netConfigModal').is(':hidden');"
+            )
+        )
 
-    def _close_settings_modal(self, selenium: MiminetTester):
-        selenium.execute_script("$('#netConfigModal').modal('hide');")
+    def _close_settings_modal(self, selenium: MiminetTester, cancel_button_id="networkConfigurationCancel"):
+        if selenium.execute_script(
+            "return !document.querySelector('#netConfigModal')"
+            " || $('#netConfigModal').is(':hidden');"
+        ):
+            return
+        cancel_button = selenium.find_element(By.ID, cancel_button_id)
+        cancel_button.click()
         selenium.wait_for(
             lambda driver: driver.execute_script(
                 "return !document.querySelector('#netConfigModal')"

From 9a0bc124c209dbe15390c8dac378d321dce874be Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Tue, 18 Nov 2025 10:55:26 +0300
Subject: [PATCH 32/33] style

---
 front/src/miminet_auth.py      | 12 ++++++------
 front/src/static/netfront_f.js | 35 ++++++++++++----------------------
 front/src/templates/base.html  |  9 +++++----
 3 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/front/src/miminet_auth.py b/front/src/miminet_auth.py
index cd8b2533..9cc7eb42 100644
--- a/front/src/miminet_auth.py
+++ b/front/src/miminet_auth.py
@@ -162,19 +162,19 @@ def animation_filters():
     if request.method == "POST":
         payload = request.get_json(silent=True) or {}
 
-        if "hide_arp" in payload:
-            user.animation_hide_arp = bool(payload.get("hide_arp"))
+        if "hideARP" in payload:
+            user.animation_hide_arp = bool(payload.get("hideARP"))
 
-        if "hide_stp" in payload:
-            user.animation_hide_stp = bool(payload.get("hide_stp"))
+        if "hideSTP" in payload:
+            user.animation_hide_stp = bool(payload.get("hideSTP"))
 
         db.session.commit()
 
     return (
         jsonify(
             {
-                "hide_arp": bool(user.animation_hide_arp),
-                "hide_stp": bool(user.animation_hide_stp),
+                "hideARP": bool(user.animation_hide_arp),
+                "hideSTP": bool(user.animation_hide_stp),
             }
         ),
         200,
diff --git a/front/src/static/netfront_f.js b/front/src/static/netfront_f.js
index 0cd95b4f..32aea0a1 100644
--- a/front/src/static/netfront_f.js
+++ b/front/src/static/netfront_f.js
@@ -1827,11 +1827,6 @@ const FilterPackets = function () {
             .filter((step) => step.length > 0);
 };
 
-const SetFilterCheckboxes= function () {
-    $("#ARPFilterCheckbox").prop("checked", filterState.hideARP);
-    $("#STPFilterCheckbox").prop("checked", filterState.hideSTP);
-};
-
 const UpdateFilterStates = function (settings) {
     if (!settings) {
         return;
@@ -1839,7 +1834,8 @@ const UpdateFilterStates = function (settings) {
 
     filterState.hideARP = Boolean(settings.hideARP);
     filterState.hideSTP = Boolean(settings.hideSTP);
-    SetFilterCheckboxes();
+    $("#ARPFilterCheckbox").prop("checked", filterState.hideARP);
+    $("#STPFilterCheckbox").prop("checked", filterState.hideSTP);
 };
 
 const SaveAnimationFilters = function () {
@@ -1847,34 +1843,27 @@ const SaveAnimationFilters = function () {
         return;
     }
 
-    const payload = {
-        hide_arp: $("#ARPFilterCheckbox").is(":checked"),
-        hide_stp: $("#STPFilterCheckbox").is(":checked"),
-    };
-
     $.ajax({
         type: "POST",
         url: "/user/animation_filters",
-        data: JSON.stringify(payload),
+        data: JSON.stringify(filterState),
         contentType: "application/json; charset=utf-8",
         success: function (data) {
             if (!window.MIMINET) {
                 return;
             }
 
-            const currentFilters = window.MIMINET.animationFilters || {};
-            currentFilters.hideARP = Boolean(
-                data && Object.prototype.hasOwnProperty.call(data, "hide_arp")
-                    ? data.hide_arp
-                    : payload.hide_arp
+            filterState.hideARP = Boolean(
+                data && Object.prototype.hasOwnProperty.call(data, "hideARP")
+                    ? data.hideARP
+                    : filterState.hideARP
             );
-            currentFilters.hideSTP = Boolean(
-                data && Object.prototype.hasOwnProperty.call(data, "hide_stp")
-                    ? data.hide_stp
-                    : payload.hide_stp
+            filterState.hideSTP = Boolean(
+                data && Object.prototype.hasOwnProperty.call(data, "hideSTP")
+                    ? data.hideSTP
+                    : filterState.hideSTP
             );
-            window.MIMINET.animationFilters = currentFilters;
-            UpdateFilterStates(currentFilters);
+            UpdateFilterStates(filterState);
         },
         error: function (xhr) {
             console.log("Cannot save animation filters");
diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index b9db8190..83b124a7 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -302,28 +302,29 @@ <h6 class="mb-2">Наше компьюнити</h6>
     window.MIMINET.isAuthenticated = {{ current_user.is_authenticated|tojson }};
 
     $(document).ready(function() {
-        const serverAnimationFilters = window.MIMINET.animationFilters = {{ {
+        const serverAnimationFilters = filterState = {{ {
             "hideARP": current_user.is_authenticated and current_user.animation_hide_arp,
             "hideSTP": current_user.is_authenticated and current_user.animation_hide_stp,
         } | tojson }};
 
         if (typeof UpdateFilterStates === "function") {
             UpdateFilterStates(serverAnimationFilters);
-            if (typeof packets !== "undefined" && packets) {
+            if (packets) {
                 SetPacketFilter();
             }
         }
 
         const resetAnimationFilters = function () {
+            console.log("Resetting filters")
             if (typeof UpdateFilterStates !== "function") {
                 return;
             }
 
             const storedFilters =
-                window.MIMINET.animationFilters || serverAnimationFilters;
+                filterState || serverAnimationFilters;
             UpdateFilterStates(storedFilters);
 
-            if (typeof packets !== "undefined" && packets) {
+            if (packets) {
                 SetPacketFilter();
             }
         };

From c94c60e5f419d0ccbbe4770c248e075e94d460a2 Mon Sep 17 00:00:00 2001
From: "kormiltsyn.roman" <romkor2006@gmail.com>
Date: Wed, 26 Nov 2025 10:34:14 +0300
Subject: [PATCH 33/33] yo

---
 front/src/app.py                   |  2 +-
 front/src/miminet_auth.py          | 44 ++++++++++++------
 front/src/miminet_model.py         |  3 +-
 front/src/static/config_vxlan.js   | 12 ++---
 front/src/static/netfront_f.js     | 72 ++++++++++++++++--------------
 front/src/templates/base.html      | 46 +++++++++++++++----
 front/tests/test_packet_filters.py | 54 ++++++++++++----------
 7 files changed, 144 insertions(+), 89 deletions(-)

diff --git a/front/src/app.py b/front/src/app.py
index 0ddca48a..3e0c2194 100644
--- a/front/src/app.py
+++ b/front/src/app.py
@@ -160,7 +160,7 @@
 )
 app.add_url_rule("/network/copy_network", methods=["POST"], view_func=copy_network)
 app.add_url_rule(
-    "/user/animation_filters", methods=["GET", "POST"], view_func=animation_filters
+    "/user/animation_filters", methods=["POST"], view_func=animation_filters
 )
 # Simulation
 app.add_url_rule("/run_simulation", methods=["POST"], view_func=run_simulation)
diff --git a/front/src/miminet_auth.py b/front/src/miminet_auth.py
index 9cc7eb42..1bd84e9c 100644
--- a/front/src/miminet_auth.py
+++ b/front/src/miminet_auth.py
@@ -27,6 +27,11 @@
 from sqlalchemy.exc import SQLAlchemyError
 from werkzeug.security import check_password_hash, generate_password_hash
 
+DEFAULT_USER_CONFIG = {
+    "hideARP": False,
+    "hideSTP": False,
+}
+
 # Global variables
 UPLOAD_FOLDER = "static/avatar/"
 UPLOAD_TMP_FOLDER = "static/tmp/avatar/"
@@ -155,30 +160,41 @@ def user_profile():
     return render_template("auth/profile.html", user=user)
 
 
+def _load_user_config(user: User) -> dict:
+    try:
+        parsed = json.loads(user.config) if user.config else {}
+    except (TypeError, ValueError):
+        parsed = {}
+
+    return parsed if isinstance(parsed, dict) else {}
+
+
 @login_required
 def animation_filters():
-    user = User.query.filter_by(id=current_user.id).first()
+    user = current_user
+    user_config = _load_user_config(user)
+
+    # Ensure defaults are present
+    merged_config = {**DEFAULT_USER_CONFIG, **user_config}
+    merged_config["hideARP"] = bool(merged_config.get("hideARP", False))
+    merged_config["hideSTP"] = bool(merged_config.get("hideSTP", False))
 
     if request.method == "POST":
         payload = request.get_json(silent=True) or {}
 
-        if "hideARP" in payload:
-            user.animation_hide_arp = bool(payload.get("hideARP"))
+        if not isinstance(payload, dict):
+            return jsonify({"error": "Invalid payload"}), 400
 
-        if "hideSTP" in payload:
-            user.animation_hide_stp = bool(payload.get("hideSTP"))
+        for key in ("hideARP", "hideSTP"):
+            if key in payload:
+                merged_config[key] = bool(payload.get(key, False))
 
+        user.config = json.dumps(merged_config)
         db.session.commit()
 
-    return (
-        jsonify(
-            {
-                "hideARP": bool(user.animation_hide_arp),
-                "hideSTP": bool(user.animation_hide_stp),
-            }
-        ),
-        200,
-    )
+        return jsonify(merged_config), 200
+
+    return jsonify({"error": "Invalid request"}), 405
 
 
 def password_recovery():
diff --git a/front/src/miminet_model.py b/front/src/miminet_model.py
index f77b9e49..af7c5399 100644
--- a/front/src/miminet_model.py
+++ b/front/src/miminet_model.py
@@ -38,8 +38,7 @@ class User(db.Model, UserMixin):  # type:ignore[name-defined]
     yandex_id = db.Column(Text, nullable=True)
     tg_id = db.Column(Text, nullable=True)
 
-    animation_hide_arp = db.Column(Boolean, default=False, nullable=False)
-    animation_hide_stp = db.Column(Boolean, default=False, nullable=False)
+    config = db.Column(Text, nullable=True)
 
 
 class Network(db.Model):  # type:ignore[name-defined]
diff --git a/front/src/static/config_vxlan.js b/front/src/static/config_vxlan.js
index 6c1e3aec..9a44d519 100644
--- a/front/src/static/config_vxlan.js
+++ b/front/src/static/config_vxlan.js
@@ -7,14 +7,14 @@ const ConfigVxlan = function (currentDevice) {
     var buttonElem = document.getElementById('config_button_vxlan_script');
     var modalElem = document.getElementById('config_modal_vxlan_script');
     var tableElem = document.getElementById('config_table_vxlan_script');
-    
+
     if (!buttonElem || !modalElem || !tableElem) {
         return;
     }
-    
+
     var buttonHTML = buttonElem.innerHTML;
     var modalHTML = modalElem.innerHTML;
-    var tableHTML = tableElem.innerHTML;    
+    var tableHTML = tableElem.innerHTML;
 
     modalHTML = modalHTML.replace('id="VxlanModal"', 'id="' + modalId + '"');
     tableHTML = tableHTML.replace('id="config_table_vxlan"', 'id="' + tableId + '"');
@@ -59,7 +59,7 @@ function setupVxlanEventHandlers(currentDevice, modalId, tableId) {
         PostNodesEdges();
     });
 
-    $('#' + modalId).find('#vxlanConfigrationSubmit').on('click', function () {
+    $('#' + modalId).find('#vxlanConfigurationSubmit').on('click', function () {
         $('#' + modalId).modal('hide');
     });
 
@@ -274,7 +274,7 @@ function addClientVxlanInterface(currentDevice, tableId, modalId) {
         return item.id === deviceEntry;
     });
     if (iface) {
-          if (iface.vxlan_connection_type === 0 && iface.vxlan_vni !== null && iface.vxlan_vni !== undefined) {
+        if (iface.vxlan_connection_type === 0 && iface.vxlan_vni !== null && iface.vxlan_vni !== undefined) {
             showAlert("Этот интерфейс уже привязан к VNI: " + String(iface.vxlan_vni), "warning", modalId);
             return;
         }
@@ -414,4 +414,4 @@ function showAlert(message, type = 'info', modalId) {
     setTimeout(() => {
         $(`#${alertId}`).alert('close');
     }, 5000);
-}
\ No newline at end of file
+}
diff --git a/front/src/static/netfront_f.js b/front/src/static/netfront_f.js
index 32aea0a1..c45e6d9f 100644
--- a/front/src/static/netfront_f.js
+++ b/front/src/static/netfront_f.js
@@ -4,8 +4,8 @@ let global_eh = undefined;
 var NetworkUpdateTimeoutId = -1;
 let NetworkCache = [];
 
-let packets_not_filtered = null;
-let filterState = {
+let packetsNotFiltered = null;
+let packetFilterState = {
     hideARP: false,
     hideSTP: false,
 };
@@ -1284,12 +1284,9 @@ const CheckSimulation = function (simulation_id)
                 pcaps = data.pcaps;
 
                 // Set filters
-                packets_not_filtered = null;
+                packetsNotFiltered = null;
                 SetPacketFilter();
 
-                // TODO: подумать над этим
-                // SetNetworkPlayerState(0);
-
                 const answerButton = document.querySelector('button[name="answerQuestion"]');
                 if (answerButton) {
                     answerButton.disabled = false;
@@ -1816,9 +1813,9 @@ const FilterPackets = function () {
                 step.filter(
                     (pkt) =>
                         !(
-                            (filterState.hideARP &&
+                            (packetFilterState.hideARP &&
                             pkt.data.label.startsWith("ARP")) ||
-                            filterState.hideSTP &&
+                            packetFilterState.hideSTP &&
                             (pkt.data.label.startsWith("STP") ||
                             pkt.data.label.startsWith("RSTP"))
                         )
@@ -1832,38 +1829,38 @@ const UpdateFilterStates = function (settings) {
         return;
     }
 
-    filterState.hideARP = Boolean(settings.hideARP);
-    filterState.hideSTP = Boolean(settings.hideSTP);
-    $("#ARPFilterCheckbox").prop("checked", filterState.hideARP);
-    $("#STPFilterCheckbox").prop("checked", filterState.hideSTP);
+    Object.assign(packetFilterState, settings);
+    $("#ARPFilterCheckbox").prop("checked", packetFilterState.hideARP);
+    $("#STPFilterCheckbox").prop("checked", packetFilterState.hideSTP);
 };
 
 const SaveAnimationFilters = function () {
-    if (!window.MIMINET || window.MIMINET.isAuthenticated !== true) {
+    if (!window.isAuthenticated) {
         return;
     }
 
+    const payload = {
+        hideARP: Boolean(packetFilterState.hideARP),
+        hideSTP: Boolean(packetFilterState.hideSTP),
+    };
+
     $.ajax({
         type: "POST",
         url: "/user/animation_filters",
-        data: JSON.stringify(filterState),
+        data: JSON.stringify(payload),
         contentType: "application/json; charset=utf-8",
+        dataType: "json",
         success: function (data) {
-            if (!window.MIMINET) {
+            if (!data) {
                 return;
             }
 
-            filterState.hideARP = Boolean(
-                data && Object.prototype.hasOwnProperty.call(data, "hideARP")
-                    ? data.hideARP
-                    : filterState.hideARP
-            );
-            filterState.hideSTP = Boolean(
-                data && Object.prototype.hasOwnProperty.call(data, "hideSTP")
-                    ? data.hideSTP
-                    : filterState.hideSTP
-            );
-            UpdateFilterStates(filterState);
+            const saved = {
+                hideARP: Boolean(data.hideARP),
+                hideSTP: Boolean(data.hideSTP),
+            };
+
+            UpdateFilterStates(saved);
         },
         error: function (xhr) {
             console.log("Cannot save animation filters");
@@ -1873,18 +1870,23 @@ const SaveAnimationFilters = function () {
 };
 
 const SetPacketFilter = function () {
+    // If network player UI is absent (e.g., not on network page), skip.
+    if (!document.getElementById("NetworkPlayer") || !document.getElementById("PacketSliderInput")) {
+        return;
+    }
+
     console.log("Packet filter call");
     // SetPacketFilter first call on emulated network
-    if (packets && !packets_not_filtered) {
-        packets_not_filtered = JSON.parse(JSON.stringify(packets)); // Array deep copy
+    if (packets && !packetsNotFiltered) {
+        packetsNotFiltered = JSON.parse(JSON.stringify(packets)); // Array deep copy
     }
     // Numerous filter call, we grab our packets copy to filter it
-    else if (packets_not_filtered) {
-        packets = JSON.parse(JSON.stringify(packets_not_filtered));
+    else if (packetsNotFiltered) {
+        packets = JSON.parse(JSON.stringify(packetsNotFiltered));
     }
 
-    filterState.hideARP = $("#ARPFilterCheckbox").is(":checked");
-    filterState.hideSTP = $("#STPFilterCheckbox").is(":checked");
+    packetFilterState.hideARP = $("#ARPFilterCheckbox").is(":checked");
+    packetFilterState.hideSTP = $("#STPFilterCheckbox").is(":checked");
 
     if (packets) {
         FilterPackets();
@@ -1899,7 +1901,7 @@ const SetNetworkPlayerState = function (simulation_id) {
 
     // Reset?
     if (simulation_id === -1) {
-        packets_not_filtered = null;
+        packetsNotFiltered = null;
         packets = null;
         pcaps = [];
         SetNetworkPlayerState(0);
@@ -1917,6 +1919,10 @@ const SetNetworkPlayerState = function (simulation_id) {
         PacketPlayer.getInstance().InitPlayer(packets);
 
         // Configure the slider
+        if (!$('#PacketSliderInput')[0] || !$('#PacketSliderInput')[0].noUiSlider) {
+            return;
+        }
+
         $('#PacketSliderInput')[0].noUiSlider.updateOptions({
             start: [1],
             range: {
diff --git a/front/src/templates/base.html b/front/src/templates/base.html
index 83b124a7..21de9a01 100644
--- a/front/src/templates/base.html
+++ b/front/src/templates/base.html
@@ -298,14 +298,32 @@ <h6 class="mb-2">Наше компьюнити</h6>
 <script src="{{ url_for('static', filename='/miminet_animation.js') }}"></script>
 
 <script>
-    window.MIMINET = window.MIMINET || {};
-    window.MIMINET.isAuthenticated = {{ current_user.is_authenticated|tojson }};
+    window.isAuthenticated = {{ current_user.is_authenticated|tojson }};
 
     $(document).ready(function() {
-        const serverAnimationFilters = filterState = {{ {
-            "hideARP": current_user.is_authenticated and current_user.animation_hide_arp,
-            "hideSTP": current_user.is_authenticated and current_user.animation_hide_stp,
-        } | tojson }};
+        const rawUserConfig = {{ (current_user.config or "null") | tojson }};
+        const parsedUserConfig = (() => {
+            try {
+                if (!rawUserConfig) {
+                    return {};
+                }
+
+                if (typeof rawUserConfig === "string") {
+                    const parsed = JSON.parse(rawUserConfig);
+                    return parsed && typeof parsed === "object" ? parsed : {};
+                }
+
+                return typeof rawUserConfig === "object" ? rawUserConfig : {};
+            } catch (err) {
+                console.warn("Cannot parse user config", err);
+                return {};
+            }
+        })();
+
+        const serverAnimationFilters = {
+            hideARP: Boolean(window.isAuthenticated && parsedUserConfig.hideARP),
+            hideSTP: Boolean(window.isAuthenticated && parsedUserConfig.hideSTP),
+        };
 
         if (typeof UpdateFilterStates === "function") {
             UpdateFilterStates(serverAnimationFilters);
@@ -321,7 +339,7 @@ <h6 class="mb-2">Наше компьюнити</h6>
             }
 
             const storedFilters =
-                filterState || serverAnimationFilters;
+                packetFilterState || serverAnimationFilters;
             UpdateFilterStates(storedFilters);
 
             if (packets) {
@@ -329,6 +347,16 @@ <h6 class="mb-2">Наше компьюнити</h6>
             }
         };
 
+        const escHandler = (evt) => {
+            if (evt.key === 'Escape' || evt.keyCode === 27) {
+                resetAnimationFilters();
+            }
+        };
+
+        $('#netConfigModal').on('shown.bs.modal', () => {
+            document.addEventListener('keydown', escHandler);
+        });
+
         $("#networkConfigurationCancel").click(function(){
             resetAnimationFilters();
             $('#netConfigModal').modal('hide');
@@ -344,7 +372,7 @@ <h6 class="mb-2">Наше компьюнити</h6>
             network_description = $("#network_description").val();
             UpdateNetworkConfig();
             SetPacketFilter();
-            if (window.MIMINET.isAuthenticated && typeof SaveAnimationFilters === "function") {
+            if (window.isAuthenticated && typeof SaveAnimationFilters === "function") {
                 SaveAnimationFilters();
             }
             $('#netConfigModal').modal('hide');
@@ -358,7 +386,7 @@ <h6 class="mb-2">Наше компьюнити</h6>
                 network_description = $("#network_description").val();
                 UpdateNetworkConfig();
                 SetPacketFilter();
-                if (window.MIMINET.isAuthenticated && typeof SaveAnimationFilters === "function") {
+                if (window.isAuthenticated && typeof SaveAnimationFilters === "function") {
                     SaveAnimationFilters();
                 }
                 $('#netConfigModal').modal('hide');
diff --git a/front/tests/test_packet_filters.py b/front/tests/test_packet_filters.py
index 42ea6e62..568e6f75 100644
--- a/front/tests/test_packet_filters.py
+++ b/front/tests/test_packet_filters.py
@@ -16,7 +16,7 @@ def network(self, selenium: MiminetTester):
     def _wait_filter_state_ready(self, selenium: MiminetTester):
         selenium.wait_for(
             lambda driver: driver.execute_script(
-                "return typeof filterState !== 'undefined' && "
+                "return typeof packetFilterState !== 'undefined' && "
                 "typeof SetPacketFilter === 'function';"
             )
         )
@@ -37,7 +37,9 @@ def _save_network_settings(self, selenium: MiminetTester):
             )
         )
 
-    def _close_settings_modal(self, selenium: MiminetTester, cancel_button_id="networkConfigurationCancel"):
+    def _close_settings_modal(
+        self, selenium: MiminetTester, cancel_button_id="networkConfigurationCancel"
+    ):
         if selenium.execute_script(
             "return !document.querySelector('#netConfigModal')"
             " || $('#netConfigModal').is(':hidden');"
@@ -61,9 +63,9 @@ def _checkbox_state(self, selenium: MiminetTester, checkbox_id: str):
     def _prepare_packets(self, selenium: MiminetTester, labels: list[str]):
         selenium.execute_script(
             """
-            filterState.hideARP = false;
-            filterState.hideSTP = false;
-            packets_not_filtered = null;
+            packetFilterState.hideARP = false;
+            packetFilterState.hideSTP = false;
+            packetsNotFiltered = null;
             packets = arguments[0].map(function(label){ return [{ data: { label: label } }]; });
             pcaps = [];
             """,
@@ -86,7 +88,7 @@ def test_enable_arp_filter_filters_packets(
         self._close_settings_modal(selenium)
         selenium.wait_for(
             lambda driver: driver.execute_script(
-                "return filterState.hideARP === true"
+                "return packetFilterState.hideARP === true"
                 " && Array.isArray(packets)"
                 " && packets.length === 1"
                 " && packets[0].length === 1"
@@ -98,9 +100,9 @@ def test_enable_arp_filter_filters_packets(
         assert filtered_packets[0][0]["data"]["label"] == "ICMP packet"
 
         self._open_settings_modal(selenium)
-        assert self._checkbox_state(selenium, "ARPFilterCheckbox") is True, (
-            "ARP checkbox should remain selected after saving"
-        )
+        assert (
+            self._checkbox_state(selenium, "ARPFilterCheckbox") is True
+        ), "ARP checkbox should remain selected after saving"
         self._close_settings_modal(selenium)
 
     def test_cancel_does_not_change_filter_state(
@@ -109,22 +111,26 @@ def test_cancel_does_not_change_filter_state(
         selenium.get(network.url)
         self._wait_filter_state_ready(selenium)
 
-        initial_state = selenium.execute_script("return filterState.hideARP === true;")
+        initial_state = selenium.execute_script(
+            "return packetFilterState.hideARP === true;"
+        )
 
         self._open_settings_modal(selenium)
         arp_checkbox = selenium.find_element(By.CSS_SELECTOR, "#ARPFilterCheckbox")
         arp_checkbox.click()  # toggle current state
         self._close_settings_modal(selenium)  # close without saving
 
-        current_state = selenium.execute_script("return filterState.hideARP === true;")
-        assert current_state == initial_state, (
-            "Filter state must not change when closing without saving"
+        current_state = selenium.execute_script(
+            "return packetFilterState.hideARP === true;"
         )
+        assert (
+            current_state == initial_state
+        ), "Filter state must not change when closing without saving"
 
         self._open_settings_modal(selenium)
-        assert self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state, (
-            "ARP checkbox should display the original value after cancel"
-        )
+        assert (
+            self._checkbox_state(selenium, "ARPFilterCheckbox") == initial_state
+        ), "ARP checkbox should display the original value after cancel"
         self._close_settings_modal(selenium)
 
     def test_enable_stp_filter_filters_packets(
@@ -151,7 +157,7 @@ def test_enable_stp_filter_filters_packets(
 
         selenium.wait_for(
             lambda driver: driver.execute_script(
-                "return filterState.hideSTP === true"
+                "return packetFilterState.hideSTP === true"
                 " && Array.isArray(packets)"
                 " && packets.length === 1"
                 " && packets[0].length === 1"
@@ -164,9 +170,9 @@ def test_enable_stp_filter_filters_packets(
         assert filtered_packets[0][0]["data"]["label"] == "ICMP packet"
 
         self._open_settings_modal(selenium)
-        assert self._checkbox_state(selenium, "STPFilterCheckbox") is True, (
-            "STP checkbox should remain selected after saving"
-        )
+        assert (
+            self._checkbox_state(selenium, "STPFilterCheckbox") is True
+        ), "STP checkbox should remain selected after saving"
         self._close_settings_modal(selenium)
 
     def test_disabling_filters_restores_packets(
@@ -196,8 +202,8 @@ def test_disabling_filters_restores_packets(
 
         selenium.wait_for(
             lambda driver: driver.execute_script(
-                "return filterState.hideARP === true"
-                " && filterState.hideSTP === true"
+                "return packetFilterState.hideARP === true"
+                " && packetFilterState.hideSTP === true"
                 " && Array.isArray(packets)"
                 " && packets.length === 0;"
             )
@@ -216,8 +222,8 @@ def test_disabling_filters_restores_packets(
 
         selenium.wait_for(
             lambda driver: driver.execute_script(
-                "return filterState.hideARP === false"
-                " && filterState.hideSTP === false"
+                "return packetFilterState.hideARP === false"
+                " && packetFilterState.hideSTP === false"
                 " && Array.isArray(packets)"
                 " && packets.length === 2;"
             )