@geode/opengeodeweb-front 10.14.0-rc.1 → 10.14.0-rc.2

package/.oxlintrc.json

@@ -25,7 +25,7 @@
     "eslint/id-length": [
       "error",
       {
-        "exceptions": ["x", "y", "z", "i", "j", "k", "r", "g", "b", "id", "ID", "fs", "os", "_"],
+        "exceptions": ["x", "y", "z", "i", "j", "k", "id", "ID", "fs", "os", "_"],
         "min": 3
       }
     ],
@@ -123,7 +123,9 @@
         "vitest/prefer-to-be-truthy": "off",
         "vitest/prefer-to-be-falsy": "off",
         "vitest/require-test-timeout": "warn",
-        "vitest/prefer-importing-vitest-globals": "off"
+        "vitest/prefer-importing-vitest-globals": "off",
+        "jest/consistent-test-it": ["error", { "fn": "test", "withinDescribe": "test" }],
+        "vitest/prefer-spy-on": "off"
       }
     },
     {

package/app/components/Viewer/Options/ColorPicker.vue

@@ -1,13 +1,37 @@
 <script setup>
+// oxlint-disable id-length
 const colorPickerRef = useTemplateRef("colorPickerRef");
 const model = defineModel();
 const { pressed } = useMousePressed({ target: colorPickerRef });
 
-const color = ref(model);
+const vuetifyColor = ref({
+  r: model.value.red,
+  g: model.value.green,
+  b: model.value.blue,
+  a: model.value.alpha,
+});
+
+watch(
+  model,
+  (newValue) => {
+    vuetifyColor.value = {
+      r: newValue.red,
+      g: newValue.green,
+      b: newValue.blue,
+      a: newValue.alpha,
+    };
+  },
+  { deep: true },
+);
 
 watch(pressed, (value) => {
   if (!value) {
-    model.value = color.value;
+    model.value = {
+      red: vuetifyColor.value.r,
+      green: vuetifyColor.value.g,
+      blue: vuetifyColor.value.b,
+      alpha: vuetifyColor.value.a,
+    };
   }
 });
 </script>
@@ -15,11 +39,11 @@ watch(pressed, (value) => {
 <template>
   <v-color-picker
     ref="colorPickerRef"
-    v-model="color"
+    v-model="vuetifyColor"
     flat
     canvas-height="100"
     hide-inputs
     width="100%"
-    mode="rgb"
+    mode="rgba"
   />
 </template>

package/app/utils/default_styles.js

@@ -5,21 +5,21 @@ const cells_defaultVisibility = true;
 const polygons_defaultVisibility = true;
 const polyhedra_defaultVisibility = true;
 const points_defaultSize = 10;
-const points_defaultColor = { r: 20, g: 20, b: 20 };
+const points_defaultColor = { red: 20, green: 20, blue: 20, alpha: 1 };
 const edges_defaultWidth = 2;
-const edges_defaultColor = { r: 20, g: 20, b: 20 };
-const cells_defaultColor = { r: 255, g: 255, b: 255 };
-const polygons_defaultColor = { r: 255, g: 255, b: 255 };
-const polyhedra_defaultColor = { r: 255, g: 255, b: 255 };
+const edges_defaultColor = { red: 20, green: 20, blue: 20, alpha: 1 };
+const cells_defaultColor = { red: 255, green: 255, blue: 255, alpha: 1 };
+const polygons_defaultColor = { red: 255, green: 255, blue: 255, alpha: 1 };
+const polyhedra_defaultColor = { red: 255, green: 255, blue: 255, alpha: 1 };
 
 const corners_defaultVisibility = true;
-const corners_defaultColor = { r: 20, g: 20, b: 20 };
+const corners_defaultColor = { red: 20, green: 20, blue: 20, alpha: 1 };
 const lines_defaultVisibility = true;
-const lines_defaultColor = { r: 20, g: 20, b: 20 };
+const lines_defaultColor = { red: 20, green: 20, blue: 20, alpha: 1 };
 const surfaces_defaultVisibility = true;
-const surfaces_defaultColor = { r: 255, g: 255, b: 255 };
+const surfaces_defaultColor = { red: 255, green: 255, blue: 255, alpha: 1 };
 const blocks_defaultVisibility = true;
-const blocks_defaultColor = { r: 255, g: 255, b: 255 };
+const blocks_defaultColor = { red: 255, green: 255, blue: 255, alpha: 1 };
 
 const DEFAULT_MODEL_COMPONENT_TYPE_COLORS = {
   Corner: corners_defaultColor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.14.0-rc.1",
+  "version": "10.14.0-rc.2",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {

package/tests/integration/setup.js

@@ -1,3 +1,5 @@
+// oxlint-disable vitest/require-top-level-describe
+
 // Node.js imports
 import { WebSocket } from "ws";
 import path from "node:path";

package/tests/integration/stores/data_style/mesh/cells.nuxt.test.js

@@ -20,20 +20,20 @@ const cell_attribute = { name: "RGB_data" };
 let id = "",
   projectFolderPath = "";
 
-beforeAll(async () => {
-  id = "";
-  projectFolderPath = "";
-  ({ id, projectFolderPath } = await setupIntegrationTests(file_name, geode_object));
-}, INTERVAL_TIMEOUT);
+describe("mesh cells", () => {
+  beforeAll(async () => {
+    id = "";
+    projectFolderPath = "";
+    ({ id, projectFolderPath } = await setupIntegrationTests(file_name, geode_object));
+  }, INTERVAL_TIMEOUT);
 
-afterAll(async () => {
-  console.log("afterAll mesh cells kill", projectFolderPath);
-  await cleanupBackend(projectFolderPath);
-});
+  afterAll(async () => {
+    console.log("afterAll mesh cells kill", projectFolderPath);
+    await cleanupBackend(projectFolderPath);
+  });
 
-describe("Mesh cells", () => {
-  describe("Cells visibility", () => {
-    test("Visibility true", async () => {
+  describe("cells visibility", () => {
+    test("visibility true", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
       const visibility = true;
@@ -53,11 +53,11 @@ describe("Mesh cells", () => {
     });
   });
 
-  describe("Cells color", () => {
-    test("Color red", async () => {
+  describe("cells color", () => {
+    test("color red", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const color = { r: 255, g: 0, b: 0 };
+      const color = { red: 255, green: 0, blue: 0, alpha: 1 };
       const spy = vi.spyOn(viewerStore, "request");
       const result = dataStyleStore.setMeshCellsColor(id, color);
       expect(result).toBeInstanceOf(Promise);
@@ -74,8 +74,8 @@ describe("Mesh cells", () => {
     });
   });
 
-  describe("Cells vertex attribute", () => {
-    test("Coloring vertex attribute", async () => {
+  describe("cells vertex attribute", () => {
+    test("coloring vertex attribute", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
       const spy = vi.spyOn(viewerStore, "request");
@@ -94,8 +94,8 @@ describe("Mesh cells", () => {
     });
   });
 
-  describe("Cells cell attribute", () => {
-    test("Coloring cell attribute", async () => {
+  describe("cells cell attribute", () => {
+    test("coloring cell attribute", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
       const spy = vi.spyOn(viewerStore, "request");
@@ -114,39 +114,44 @@ describe("Mesh cells", () => {
     });
   });
 
-  describe("Cells active coloring", () => {
-    test("test coloring", async () => {
+  describe("cells active coloring", () => {
+    test("coloring color", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const coloringTypes = [
-        { name: "color" },
-        {
-          name: "vertex",
-          function: () => dataStyleStore.setMeshCellsVertexAttributeName(id, vertex_attribute.name),
-        },
-        {
-          name: "cell",
-          function: () => dataStyleStore.setMeshCellsCellAttributeName(id, cell_attribute.name),
-        },
-      ];
-      async function testColoring(coloringType, expectedColoringType) {
-        if (coloringType.function) {
-          await coloringType.function();
-        }
-        const result = dataStyleStore.setMeshCellsActiveColoring(id, coloringType.name);
-        expect(result).toBeInstanceOf(Promise);
-        await result;
-        expect(dataStyleStore.meshCellsActiveColoring(id)).toBe(expectedColoringType);
-        expect(viewerStore.status).toBe(Status.CONNECTED);
-      }
+      const coloringName = "color";
+      const result = dataStyleStore.setMeshCellsActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(dataStyleStore.meshCellsActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
 
-      await testColoring(coloringTypes[0], "color");
-      await testColoring(coloringTypes[1], "vertex");
-      await testColoring(coloringTypes[2], "cell");
+    test("coloring vertex", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      await dataStyleStore.setMeshCellsVertexAttributeName(id, vertex_attribute.name);
+      const coloringName = "vertex";
+      const result = dataStyleStore.setMeshCellsActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(dataStyleStore.meshCellsActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+
+    test("coloring cell", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      await dataStyleStore.setMeshCellsCellAttributeName(id, cell_attribute.name);
+      const coloringName = "cell";
+      const result = dataStyleStore.setMeshCellsActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(dataStyleStore.meshCellsActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
     });
   });
 
-  test("Cells apply default style", async () => {
+  test("cells apply default style", async () => {
     const dataStyleStore = useDataStyleStore();
     const viewerStore = useViewerStore();
     const result = dataStyleStore.applyMeshCellsStyle(id);

package/tests/integration/stores/data_style/mesh/edges.nuxt.test.js

@@ -20,18 +20,18 @@ const edge_attribute = { name: "edge_attribute" };
 let id = "",
   projectFolderPath = "";
 
-beforeAll(async () => {
-  ({ id, projectFolderPath } = await setupIntegrationTests(file_name, geode_object));
-}, INTERVAL_TIMEOUT);
+describe("mesh edges", () => {
+  beforeAll(async () => {
+    ({ id, projectFolderPath } = await setupIntegrationTests(file_name, geode_object));
+  }, INTERVAL_TIMEOUT);
 
-afterAll(async () => {
-  console.log("afterAll mesh edges kill", projectFolderPath);
-  await cleanupBackend(projectFolderPath);
-});
+  afterAll(async () => {
+    console.log("afterAll mesh edges kill", projectFolderPath);
+    await cleanupBackend(projectFolderPath);
+  });
 
-describe("Mesh edges", () => {
-  describe("Edges", () => {
-    test("Edges visibility", async () => {
+  describe("edges", () => {
+    test("edges visibility", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
       const visibility = true;
@@ -50,10 +50,10 @@ describe("Mesh edges", () => {
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
-    test("Edges color red", async () => {
+    test("edges color red", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const color = { r: 255, g: 0, b: 0 };
+      const color = { red: 255, green: 0, blue: 0, alpha: 1 };
       const spy = vi.spyOn(viewerStore, "request");
       const result = dataStyleStore.setMeshEdgesColor(id, color);
       expect(result).toBeInstanceOf(Promise);
@@ -69,7 +69,7 @@ describe("Mesh edges", () => {
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
-    test("Edges vertex attribute", async () => {
+    test("edges vertex attribute", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
 
@@ -86,7 +86,7 @@ describe("Mesh edges", () => {
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
-    test("Edges edge attribute", async () => {
+    test("edges edge attribute", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
 
@@ -103,36 +103,42 @@ describe("Mesh edges", () => {
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
-    test("Edges active coloring", async () => {
+    test("coloring color", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const coloringTypes = [
-        { name: "color" },
-        {
-          name: "vertex",
-          function: () => dataStyleStore.setMeshEdgesVertexAttributeName(id, vertex_attribute.name),
-        },
-        {
-          name: "edge",
-          function: () => dataStyleStore.setMeshEdgesEdgeAttributeName(id, edge_attribute.name),
-        },
-      ];
-      async function testColoring(coloringType) {
-        if (coloringType.function) {
-          await coloringType.function();
-        }
-        const result = dataStyleStore.setMeshEdgesActiveColoring(id, coloringType.name);
-        expect(result).toBeInstanceOf(Promise);
-        await result;
-        expect(dataStyleStore.meshEdgesActiveColoring(id)).toBe(coloringType.name);
-        expect(viewerStore.status).toBe(Status.CONNECTED);
-      }
+      const coloringName = "color";
+      const result = dataStyleStore.setMeshEdgesActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(dataStyleStore.meshEdgesActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
 
-      await testColoring(coloringTypes[0]);
-      await testColoring(coloringTypes[1]);
-      await testColoring(coloringTypes[2]);
+    test("coloring vertex", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      await dataStyleStore.setMeshEdgesVertexAttributeName(id, vertex_attribute.name);
+      const coloringName = "vertex";
+      const result = dataStyleStore.setMeshEdgesActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(dataStyleStore.meshEdgesActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+
+    test("coloring edge", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      await dataStyleStore.setMeshEdgesEdgeAttributeName(id, edge_attribute.name);
+      const coloringName = "edge";
+      const result = dataStyleStore.setMeshEdgesActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(dataStyleStore.meshEdgesActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
     });
-    test("Edges apply style", async () => {
+
+    test("edges apply style", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
       const result = dataStyleStore.applyMeshEdgesStyle(id);

package/tests/integration/stores/data_style/mesh/index.nuxt.test.js

@@ -18,18 +18,18 @@ const geode_object = "RegularGrid3D";
 let id = "",
   projectFolderPath = "";
 
-beforeAll(async () => {
-  ({ id, projectFolderPath } = await setupIntegrationTests(file_name, geode_object));
-}, INTERVAL_TIMEOUT);
+describe("mesh", () => {
+  beforeAll(async () => {
+    ({ id, projectFolderPath } = await setupIntegrationTests(file_name, geode_object));
+  }, INTERVAL_TIMEOUT);
 
-afterAll(async () => {
-  console.log("afterAll mesh index kill", projectFolderPath);
-  await cleanupBackend(projectFolderPath);
-});
+  afterAll(async () => {
+    console.log("afterAll mesh index kill", projectFolderPath);
+    await cleanupBackend(projectFolderPath);
+  });
 
-describe("Mesh", () => {
-  describe("Mesh visibility", () => {
-    test("Visibility true", async () => {
+  describe("mesh visibility", () => {
+    test("visibility true", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
       const visibility = true;
@@ -49,8 +49,8 @@ describe("Mesh", () => {
     });
   });
 
-  describe("Apply mesh default style", () => {
-    test("Apply mesh default style", async () => {
+  describe("apply mesh default style", () => {
+    test("apply mesh default style", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
       const result = dataStyleStore.applyMeshStyle(id);

package/tests/integration/stores/data_style/mesh/points.nuxt.test.js

@@ -19,18 +19,18 @@ const vertex_attribute = { name: "points" };
 let id = "",
   projectFolderPath = "";
 
-beforeAll(async () => {
-  ({ id, projectFolderPath } = await setupIntegrationTests(file_name, geode_object));
-}, INTERVAL_TIMEOUT);
+describe("mesh points", () => {
+  beforeAll(async () => {
+    ({ id, projectFolderPath } = await setupIntegrationTests(file_name, geode_object));
+  }, INTERVAL_TIMEOUT);
 
-afterAll(async () => {
-  console.log("afterAll mesh points kill", projectFolderPath);
-  await cleanupBackend(projectFolderPath);
-});
+  afterAll(async () => {
+    console.log("afterAll mesh points kill", projectFolderPath);
+    await cleanupBackend(projectFolderPath);
+  });
 
-describe("Mesh points", () => {
-  describe("Points visibility", () => {
-    test("Visibility true", async () => {
+  describe("points visibility", () => {
+    test("visibility true", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
       const visibility = true;
@@ -50,11 +50,11 @@ describe("Mesh points", () => {
     });
   });
 
-  describe("Points color", () => {
-    test("Color red", async () => {
+  describe("points color", () => {
+    test("color red", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const color = { r: 255, g: 0, b: 0 };
+      const color = { red: 255, green: 0, blue: 0, alpha: 1 };
       const spy = vi.spyOn(viewerStore, "request");
       const result = dataStyleStore.setMeshPointsColor(id, color);
       expect(result).toBeInstanceOf(Promise);
@@ -71,36 +71,33 @@ describe("Mesh points", () => {
     });
   });
 
-  describe("Points active coloring", () => {
-    test("test coloring", async () => {
+  describe("points active coloring", () => {
+    test("coloring color", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const coloringTypes = [
-        { name: "color" },
-        {
-          name: "vertex",
-          function: () =>
-            dataStyleStore.setMeshPointsVertexAttributeName(id, vertex_attribute.name),
-        },
-      ];
-      async function testColoring(coloringType, expectedColoringType) {
-        if (coloringType.function) {
-          await coloringType.function();
-        }
-        const result = dataStyleStore.setMeshPointsActiveColoring(id, coloringType.name);
-        expect(result).toBeInstanceOf(Promise);
-        await result;
-        expect(dataStyleStore.meshPointsActiveColoring(id)).toBe(expectedColoringType);
-        expect(viewerStore.status).toBe(Status.CONNECTED);
-      }
+      const coloringName = "color";
+      const result = dataStyleStore.setMeshPointsActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(dataStyleStore.meshPointsActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
 
-      await testColoring(coloringTypes[0], "color");
-      await testColoring(coloringTypes[1], "vertex");
+    test("coloring vertex", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      await dataStyleStore.setMeshPointsVertexAttributeName(id, vertex_attribute.name);
+      const coloringName = "vertex";
+      const result = dataStyleStore.setMeshPointsActiveColoring(id, coloringName);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(dataStyleStore.meshPointsActiveColoring(id)).toBe(coloringName);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
     });
   });
 
-  describe("Points size", () => {
-    test("Size 20", async () => {
+  describe("points size", () => {
+    test("size 20", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
       const size = 20;
@@ -120,8 +117,8 @@ describe("Mesh points", () => {
     });
   });
 
-  describe("Points vertex attribute", () => {
-    test("test coloring", async () => {
+  describe("points vertex attribute", () => {
+    test("vertex attribute", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
 
@@ -139,7 +136,7 @@ describe("Mesh points", () => {
     });
   });
 
-  test("Points apply default style", async () => {
+  test("points apply default style", async () => {
     const dataStyleStore = useDataStyleStore();
     const viewerStore = useViewerStore();
     const result = dataStyleStore.applyMeshPointsStyle(id);