fix connected particles selection and make it default (#347)

* fix connected particles selection and make it default * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * remove package-lock.json * fix UI bugs * tooltips * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * remove legacy code * typo * margin instead of padding * rounded end * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
zincware · Jan 20, 2024 · bab397e · bab397e
1 parent c962bb2
commit bab397e
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 267 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/zndraw/select/__init__.py b/zndraw/select/__init__.py
@@ -3,6 +3,7 @@
 from typing import Any
 
 import networkx as nx
+import numpy as np
 from pydantic import BaseModel, Field
 
 try:
@@ -90,14 +91,19 @@ def run(self, vis) -> None:
         selected_ids = vis.selection
         total_ids = []
         try:
-            graph = atoms.connectivity
+            edges = atoms.connectivity
+            graph = nx.Graph()
+            for edge in edges:
+                node_a, node_b, weight = edge
+                graph.add_edge(node_a, node_b, weight=weight)
         except AttributeError:
             return selected_ids
 
         for node_id in selected_ids:
             total_ids += list(nx.node_connected_component(graph, node_id))
+            total_ids = np.array(total_ids, dtype=int)
 
-        vis.selection = list(set(total_ids))
+        vis.selection = [x.item() for x in set(total_ids)]
 
 
 class Neighbour(SelectionBase):

diff --git a/zndraw/settings.py b/zndraw/settings.py
@@ -31,13 +31,13 @@
     "zndraw.tools.data.ASEComputeBonds",
 ]
 _SELECTION_FUNCTIONS = [
+    "zndraw.select.ConnectedParticles",
     "zndraw.select.NoneSelection",
     "zndraw.select.All",
     "zndraw.select.Invert",
     "zndraw.select.Range",
     "zndraw.select.Random",
     "zndraw.select.IdenticalSpecies",
-    "zndraw.select.ConnectedParticles",
     "zndraw.select.Neighbour",
 ]
 

diff --git a/zndraw/static/UI/UI.js b/zndraw/static/UI/UI.js
@@ -31,144 +31,6 @@ function setupUpload(socket) {
   });
 }
 
-function setupNavbarLeft() {
-  function showMenu(menu) {
-    const menus = [
-      "selectionMenu",
-      "interactionMenu",
-      "sceneMenu",
-      "drawMenu",
-      "analysisMenu",
-    ];
-    for (let i = 0; i < menus.length; i++) {
-      if (
-        menus[i] === menu &&
-        document.getElementById(menus[i]).style.display === "none"
-      ) {
-        document.getElementById(menus[i]).style.display = "block";
-        document.getElementById(`${menus[i]}Btn`).classList.add("active");
-      } else {
-        document.getElementById(menus[i]).style.display = "none";
-        document.getElementById(`${menus[i]}Btn`).classList.remove("active");
-      }
-    }
-  }
-
-  const popovers = {
-    selectionMenu: new bootstrap.Popover(
-      document.getElementById("selectionMenuBtn"),
-    ),
-    interactionMenu: new bootstrap.Popover(
-      document.getElementById("interactionMenuBtn"),
-    ),
-    sceneMenu: new bootstrap.Popover(document.getElementById("sceneMenuBtn")),
-    drawMenu: new bootstrap.Popover(document.getElementById("drawMenuBtn")),
-    analysisMenu: new bootstrap.Popover(
-      document.getElementById("analysisMenuBtn"),
-    ),
-  };
-
-  function closeMenu(menu) {
-    document.getElementById(menu).style.display = "none";
-    document.getElementById(`${menu}Btn`).classList.remove("active");
-  }
-
-  // close all popovers when clicking anywhere
-  document.addEventListener("click", () => {
-    popovers.selectionMenu.hide();
-    popovers.interactionMenu.hide();
-    popovers.sceneMenu.hide();
-    popovers.drawMenu.hide();
-    popovers.analysisMenu.hide();
-  });
-
-  document.getElementById("selectionMenuBtn").onclick = () => {
-    showMenu("selectionMenu");
-    popovers.selectionMenu.hide();
-  };
-
-  document.getElementById("selectionMenuClose").onclick = () => {
-    closeMenu("selectionMenu");
-  };
-
-  document.getElementById("interactionMenuBtn").onclick = () => {
-    showMenu("interactionMenu");
-    popovers.interactionMenu.hide();
-  };
-  document.getElementById("interactionMenuClose").onclick = () => {
-    closeMenu("interactionMenu");
-  };
-
-  document.getElementById("sceneMenuBtn").onclick = () => {
-    showMenu("sceneMenu");
-    popovers.sceneMenu.hide();
-  };
-  document.getElementById("sceneMenuClose").onclick = () => {
-    closeMenu("sceneMenu");
-  };
-
-  document.getElementById("drawMenuBtn").onclick = () => {
-    showMenu("drawMenu");
-    popovers.drawMenu.hide();
-  };
-  document.getElementById("drawMenuClose").onclick = () => {
-    closeMenu("drawMenu");
-  };
-
-  document.getElementById("analysisMenuBtn").onclick = () => {
-    showMenu("analysisMenu");
-    popovers.analysisMenu.hide();
-  };
-  document.getElementById("analysisMenuClose").onclick = () => {
-    closeMenu("analysisMenu");
-  };
-
-  document.getElementById("drawMenuBtn").onpointerenter = () => {
-    if (document.getElementById("drawMenu").style.display === "none") {
-      popovers.drawMenu.show();
-    }
-  };
-  document.getElementById("drawMenuBtn").onpointerleave = () => {
-    popovers.drawMenu.hide();
-  };
-
-  document.getElementById("sceneMenuBtn").onpointerenter = () => {
-    if (document.getElementById("sceneMenu").style.display === "none") {
-      popovers.sceneMenu.show();
-    }
-  };
-  document.getElementById("sceneMenuBtn").onpointerleave = () => {
-    popovers.sceneMenu.hide();
-  };
-
-  document.getElementById("selectionMenuBtn").onpointerenter = () => {
-    if (document.getElementById("selectionMenu").style.display === "none") {
-      popovers.selectionMenu.show();
-    }
-  };
-  document.getElementById("selectionMenuBtn").onpointerleave = () => {
-    popovers.selectionMenu.hide();
-  };
-
-  document.getElementById("interactionMenuBtn").onpointerenter = () => {
-    if (document.getElementById("interactionMenu").style.display === "none") {
-      popovers.interactionMenu.show();
-    }
-  };
-  document.getElementById("interactionMenuBtn").onpointerleave = () => {
-    popovers.interactionMenu.hide();
-  };
-
-  document.getElementById("analysisMenuBtn").onpointerenter = () => {
-    if (document.getElementById("analysisMenu").style.display === "none") {
-      popovers.analysisMenu.show();
-    }
-  };
-  document.getElementById("analysisMenuBtn").onpointerleave = () => {
-    popovers.analysisMenu.hide();
-  };
-}
-
 function setupMobile() {
   // set display style of .playPauseCtrl to block if on mobile
   if (
@@ -224,10 +86,38 @@ function setupDragDrop(socket) {
   });
 }
 
+function setupNavbarLeft2() {
+  const tooltipTriggerList = document.querySelectorAll(
+    '[data-bs-toggle="tooltip"]',
+  );
+  const tooltipList = [...tooltipTriggerList].map(
+    (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl),
+  );
+
+  let menu = document.querySelectorAll("[name=leftMenuInput]");
+  // for each one, remove the check if is was checked before click
+  const clickState = {};
+  menu.forEach((item) => {
+    clickState[item.id] = false;
+    item.addEventListener("click", () => {
+      if (clickState[item.id]) {
+        item.checked = false;
+        clickState[item.id] = false;
+      } else {
+        menu.forEach((item) => {
+          clickState[item.id] = false;
+        });
+
+        clickState[item.id] = true;
+      }
+    });
+  });
+}
+
 export function setUIEvents(socket, cache, world) {
   // resizeOffcanvas();
   setupUpload(socket);
-  setupNavbarLeft();
+  setupNavbarLeft2();
   setupMobile();
   setupDragDrop(socket);
 

diff --git a/zndraw/static/main.css b/zndraw/static/main.css
@@ -47,18 +47,15 @@ body {
   left: 0;
   height: 100%;
   width: 50px;
-  /* Adjust the width as needed */
-  /* background-color: #f0f0f0;
-        padding: 15px;  */
 }
 
 .fixed-left-menu {
-  position: fixed;
-  top: 50px;
-  left: 50px;
+  margin-left: 50px;
+  margin-top: 50px;
+  padding-bottom: 100px;
   overflow-y: auto;
-  height: calc(100% - 50px);
   min-width: 20%;
+  max-width: 50%;
 }
 
 .main-navbar {