first version of showing multiple vectors at the same time (#720)

* first version of showing multiple vectors at the same time * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * fix import --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
zincware · Nov 15, 2024 · a1b50ee · a1b50ee
1 parent d08068d
commit a1b50ee
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 86 deletions.
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -162,7 +162,7 @@ export default function App() {
       simulation_box: true,
       vectorfield: true,
       controls: "OrbitControls",
-      vectors: "",
+      vectors: [],
       vector_scale: 1.0,
       selection_color: "#ffa500",
       camera: "PerspectiveCamera",
@@ -804,18 +804,20 @@ export default function App() {
                 hoveredId={hoveredId}
                 setHoveredId={setHoveredId}
               />
-              {roomConfig["scene"].vectors != "" && (
-                <PerParticleVectors
-                  frame={currentFrame}
-                  property={roomConfig["scene"].vectors}
-                  colorMode={colorMode}
-                  arrowsConfig={{
-                    rescale: roomConfig["scene"].vector_scale,
-                    ...roomConfig.arrows,
-                  }}
-                  pathTracingSettings={roomConfig.PathTracer}
-                ></PerParticleVectors>
-              )}
+              {roomConfig["scene"].vectors[0] &&
+                roomConfig["scene"].vectors.map((vector) => (
+                  <PerParticleVectors
+                    frame={currentFrame}
+                    property={vector}
+                    colorMode={colorMode}
+                    arrowsConfig={{
+                      rescale: roomConfig["scene"].vector_scale,
+                      ...roomConfig.arrows,
+                    }}
+                    pathTracingSettings={roomConfig.PathTracer}
+                    key={vector}
+                  ></PerParticleVectors>
+                ))}
             </Pathtracer>
           </Canvas>
         )}

diff --git a/app/src/components/sidebar.tsx b/app/src/components/sidebar.tsx
@@ -29,78 +29,20 @@ JSONEditor.defaults.options.keep_oneof_values = false;
 JSONEditor.defaults.editors.object.options.titleHidden = true;
 
 interface SidebarMenuProps {
-  schema: any;
-  onSubmit: any;
-  queuePosition: number;
-  trigger?: boolean; // Mark trigger as optional
-  setTrigger?: (value: boolean) => void; // Mark setTrigger as optional
   visible: boolean;
-  useSubmit?: boolean; // provide a submit button or trigger on change
-  closeMenu?: () => void;
+  closeMenu: () => void;
+  token: string;
+  name: string;
+  sendImmediately: boolean;
 }
 
-const useJSONEditor = (
-  schema: any,
-  setUserInput: (value: any) => void,
-  useSubmit: boolean,
-) => {
-  const editorRef = useRef<HTMLDivElement>(null);
-  const JSONEditorRef = useRef<JSONEditor | null>(null);
-
-  useEffect(() => {
-    if (Object.keys(schema).length === 0) {
-      return;
-    }
-
-    if (editorRef.current) {
-      JSONEditorRef.current = new JSONEditor(editorRef.current, {
-        schema: schema,
-      });
-      let created_trigger = false;
-
-      // on ready, validate and set user input
-      JSONEditorRef.current.on("ready", () => {
-        if (useSubmit) {
-          // when using the submit button, we need to set the user input on ready
-          // otherwise, it could be None.
-          if (JSONEditorRef.current.validate()) {
-            const editorValue = JSONEditorRef.current.getValue();
-            setUserInput(editorValue);
-          }
-        }
-      });
-
-      JSONEditorRef.current.on("change", () => {
-        if (JSONEditorRef.current.ready) {
-          if (created_trigger) {
-            if (JSONEditorRef.current.validate()) {
-              const editorValue = JSONEditorRef.current.getValue();
-              setUserInput(editorValue);
-            }
-          } else {
-            // skip first trigger
-            created_trigger = true;
-          }
-        }
-      });
-    }
-    return () => {
-      if (JSONEditorRef.current) {
-        JSONEditorRef.current.destroy();
-      }
-    };
-  }, [schema]);
-
-  return editorRef;
-};
-
-const SidebarMenu2: any = ({
+const SidebarMenu = ({
   visible,
   closeMenu,
   token,
   name,
   sendImmediately,
-}) => {
+}: SidebarMenuProps) => {
   const [userInput, setUserInput] = useState<string>(undefined);
   const [schema, setSchema] = useState<any>({});
   const [sharedSchema, setSharedSchema] = useState<any>({});
@@ -423,35 +365,35 @@ function SideBar({ token }: { token: string }) {
           </BtnTooltip>
         </Card>
       </Navbar>
-      <SidebarMenu2
+      <SidebarMenu
         name="selection"
         visible={visibleOption == "selection"} // remove
         token={token}
         closeMenu={() => setVisibleOption("")}
         sendImmediately={false}
       />
-      <SidebarMenu2
+      <SidebarMenu
         name="modifier"
         visible={visibleOption == "modifier"}
         token={token}
         closeMenu={() => setVisibleOption("")}
         sendImmediately={false}
       />
-      <SidebarMenu2
+      <SidebarMenu
         name="scene"
         visible={visibleOption == "scene"}
         token={token}
         closeMenu={() => setVisibleOption("")}
         sendImmediately={true}
       />
-      <SidebarMenu2
+      <SidebarMenu
         name="geometry"
         visible={visibleOption == "geometry"}
         token={token}
         closeMenu={() => setVisibleOption("")}
         sendImmediately={false}
       />
-      <SidebarMenu2
+      <SidebarMenu
         name="analysis"
         visible={visibleOption == "analysis"}
         token={token}

diff --git a/tests/test_config.py b/tests/test_config.py
@@ -21,6 +21,14 @@ def test_config_modify_arrows(server):
     assert vis.config["arrows"]["opacity"] == 1.0
 
 
+# def test_config_replace_znsocket(server):
+#     room = "test_config_znsocket"
+#     vis = ZnDraw(url=server, token=room)
+
+#     vis.config["scene"] = None
+#     assert isinstance(vis.config["scene"], znsocket.Dict)
+
+
 def test_config_modify_scene(server):
     room = "test_config_scene"
     vis = ZnDraw(url=server, token=room)

diff --git a/zndraw/config.py b/zndraw/config.py
@@ -52,7 +52,7 @@ class Scene(BaseModel):
 
     controls: Controls = Field(Controls.OrbitControls, description="Controls")
 
-    vectors: str = Field("", description="Visualize vectorial property")
+    vectors: list = Field("", description="Visualize vectorial property")
     vector_scale: float = Field(1.0, ge=0.1, le=5, description="Rescale Vectors")
     selection_color: str = Field("#ffa500", description="Selection color")
     camera: Camera = Field(Camera.PerspectiveCamera, description="Camera")
@@ -92,7 +92,7 @@ class Scene(BaseModel):
     @classmethod
     def model_json_schema_from_atoms(cls, atoms: ase.Atoms) -> dict:
         schema = cls.model_json_schema()
-        array_props = [""]
+        array_props = []
         if atoms.calc is not None:
             for key in atoms.calc.results.keys():
                 if (
@@ -106,8 +106,10 @@ def model_json_schema_from_atoms(cls, atoms: ase.Atoms) -> dict:
                 and np.array(atoms.arrays[key]).shape[1] == 3
             ):
                 array_props.append(key)
-        schema["properties"]["vectors"]["enum"] = array_props
-        schema["properties"]["vectors"]["default"] = ""
+        # remove "positions" from the list
+        array_props = [x for x in array_props if x != "positions"]
+        schema["properties"]["vectors"]["items"] = {"type": "string", "enum": array_props}
+        schema["properties"]["vectors"]["uniqueItems"] = True
 
         # schema["properties"]["wireframe"]["format"] = "checkbox"
         schema["properties"]["animation_loop"]["format"] = "checkbox"
@@ -131,6 +133,7 @@ def model_json_schema_from_atoms(cls, atoms: ase.Atoms) -> dict:
         schema["properties"]["camera_near"]["step"] = 0.1
         schema["properties"]["camera_far"]["format"] = "range"
         schema["properties"]["camera_far"]["step"] = 1
+
         # schema["properties"]["bonds"]["format"] = "checkbox"
         # schema["properties"]["line_label"]["format"] = "checkbox"