@geode/opengeodeweb-front 10.0.0-rc.1 → 10.0.1-rc.1

package/app/utils/default_styles.js

@@ -2,12 +2,14 @@
 
 const points_defaultVisibility = true
 const edges_defaultVisibility = true
+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 edges_defaultSize = 5
 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 }
 
@@ -52,6 +54,22 @@ const meshEdgesDefaultStyle = (
   }
 }
 
+const meshCellsDefaultStyle = (
+  visibility = cells_defaultVisibility,
+  color = cells_defaultColor,
+) => {
+  return {
+    visibility,
+    coloring: {
+      active: "color",
+      cell: null,
+      color,
+      textures: null,
+      vertex: null,
+    },
+  }
+}
+
 const meshPolygonsDefaultStyle = (
   visibility = polygons_defaultVisibility,
   color = polygons_defaultColor,
@@ -93,14 +111,32 @@ const pointSet_defaultStyle = () => {
 const edgedCurve_defaultStyle = () => {
   return {
     visibility: true,
-    points: meshPointsDefaultStyle(false),
+    points: meshPointsDefaultStyle(),
     edges: meshEdgesDefaultStyle(),
   }
 }
 
-const surface_defaultStyle = (visibility = true) => {
+const grid2d_defaultStyle = () => {
   return {
-    visibility,
+    visibility: true,
+    points: meshPointsDefaultStyle(false),
+    edges: meshEdgesDefaultStyle(false),
+    cells: meshCellsDefaultStyle(),
+  }
+}
+
+const grid3d_defaultStyle = () => {
+  return {
+    visibility: true,
+    points: meshPointsDefaultStyle(false),
+    edges: meshEdgesDefaultStyle(false),
+    cells: meshCellsDefaultStyle(),
+    polyhedra: meshPolyhedraDefaultStyle(),
+  }
+}
+const surface_defaultStyle = () => {
+  return {
+    visibility: true,
     points: meshPointsDefaultStyle(false),
     edges: meshEdgesDefaultStyle(false),
     polygons: meshPolygonsDefaultStyle(),
@@ -231,8 +267,8 @@ const default_styles = () => {
     HybridSolid3D: solid_defaultStyle(),
     ImplicitCrossSection: implicitCrossSection_defaultStyle(),
     ImplicitStructuralModel: implicitStructuralModel_defaultStyle(),
-    LightRegularGrid2D: surface_defaultStyle(),
-    LightRegularGrid3D: solid_defaultStyle(),
+    LightRegularGrid2D: grid2d_defaultStyle(),
+    LightRegularGrid3D: grid3d_defaultStyle(),
     PointSet2D: pointSet_defaultStyle(),
     PointSet3D: pointSet_defaultStyle(),
     PolygonalSurface2D: surface_defaultStyle(),
@@ -240,8 +276,8 @@ const default_styles = () => {
     PolyhedralSolid3D: solid_defaultStyle(),
     RasterImage2D: {},
     RasterImage3D: {},
-    RegularGrid2D: surface_defaultStyle(),
-    RegularGrid3D: solid_defaultStyle(),
+    RegularGrid2D: grid2d_defaultStyle(),
+    RegularGrid3D: grid3d_defaultStyle(),
     Section: section_defaultStyle(),
     StructuralModel: structuralModel_defaultStyle(),
     TetrahedralSolid3D: solid_defaultStyle(),

package/app/utils/file_import_workflow.js

@@ -8,9 +8,9 @@ async function importWorkflow(files) {
   console.log("importWorkflow", { files })
   const promise_array = []
   for (const file of files) {
-    const { filename, geode_object } = file
-    console.log({ filename }, { geode_object })
-    promise_array.push(importFile(filename, geode_object))
+    const { filename, geode_object_type } = file
+    console.log({ filename }, { geode_object_type })
+    promise_array.push(importFile(filename, geode_object_type))
   }
   const results = await Promise.all(promise_array)
   const hybridViewerStore = useHybridViewerStore()
@@ -18,15 +18,10 @@ async function importWorkflow(files) {
   return results
 }
 
-function buildImportItemFromPayloadApi(value, geode_object) {
+function buildImportItemFromPayloadApi(value, geode_object_type) {
+  console.log("buildImportItemFromPayloadApi", { value, geode_object_type })
   return {
-    id: value.id,
-    object_type: value.object_type,
-    geode_object,
-    native_filename: value.native_file_name,
-    viewable_filename: value.viewable_file_name,
-    displayed_name: value.name,
-    vtk_js: { binary_light_viewable: value.binary_light_viewable },
+    ...value,
   }
 }
 
@@ -41,16 +36,16 @@ async function importItem(item) {
   })
 
   await treeviewStore.addItem(
-    item.geode_object,
-    item.displayed_name,
+    item.geode_object_type,
+    item.name,
     item.id,
-    item.object_type,
+    item.viewer_type,
   )
 
   await hybridViewerStore.addItem(item.id)
-  await dataStyleStore.addDataStyle(item.id, item.geode_object)
+  await dataStyleStore.addDataStyle(item.id, item.geode_object_type)
 
-  if (item.object_type === "model") {
+  if (item.viewer_type === "model") {
     await Promise.all([
       dataBaseStore.fetchMeshComponents(item.id),
       dataBaseStore.fetchUuidToFlatIndexDict(item.id),
@@ -61,18 +56,19 @@ async function importItem(item) {
   return item.id
 }
 
-async function importFile(filename, geode_object) {
+async function importFile(filename, geode_object_type) {
   const { data } = await api_fetch({
     schema: back_schemas.opengeodeweb_back.save_viewable_file,
     params: {
-      input_geode_object: geode_object,
-      filename: filename,
+      geode_object_type,
+      filename,
     },
   })
 
   console.log("data.value", data.value)
+  console.log("data.value", data._value)
 
-  const item = buildImportItemFromPayloadApi(data._value, geode_object)
+  const item = buildImportItemFromPayloadApi(data.value, geode_object_type)
   return importItem(item)
 }
 

package/app/utils/local.js

@@ -142,6 +142,9 @@ async function run_back(
       "--allowed_origin http://localhost:*",
       "--timeout " + 0,
     ]
+    if (process.env.NODE_ENV === "development") {
+      back_args.push("--debug")
+    }
     console.log("run_back", executable_name, executable_path, back_args)
     await run_script(
       executable_name,
@@ -294,6 +297,7 @@ async function run_browser(
 
   const nuxt_process = child_process.spawn("npm", ["run", script_name], {
     shell: true,
+    FORCE_COLOR: true,
   })
 
   return new Promise((resolve) => {

package/internal_stores/mesh/cells.js

@@ -0,0 +1,176 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local constants
+const mesh_cells_schemas = viewer_schemas.opengeodeweb_viewer.mesh.cells
+
+export function useMeshCellsStyle() {
+  const dataStyleStore = useDataStyleStore()
+
+  function meshCellsStyle(id) {
+    return dataStyleStore.getStyle(id).cells
+  }
+
+  function meshCellsVisibility(id) {
+    return meshCellsStyle(id).visibility
+  }
+  function setMeshCellsVisibility(id, visibility) {
+    const cells_style = meshCellsStyle(id)
+    return viewer_call(
+      { schema: mesh_cells_schemas.visibility, params: { id, visibility } },
+      {
+        response_function: () => {
+          cells_style.visibility = visibility
+          console.log(
+            setMeshCellsVisibility.name,
+            { id },
+            meshCellsVisibility(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshCellsColor(id) {
+    return meshCellsStyle(id).coloring.color
+  }
+  function setMeshCellsColor(id, color) {
+    const coloring_style = meshCellsStyle(id).coloring
+    return viewer_call(
+      { schema: mesh_cells_schemas.color, params: { id, color } },
+      {
+        response_function: () => {
+          coloring_style.color = color
+          console.log(
+            setMeshCellsColor.name,
+            { id },
+            JSON.stringify(meshCellsColor(id)),
+          )
+        },
+      },
+    )
+  }
+
+  function meshCellsTextures(id) {
+    return meshCellsStyle(id).coloring.textures
+  }
+  function setMeshCellsTextures(id, textures) {
+    const coloring_style = meshCellsStyle(id).coloring
+    return viewer_call(
+      {
+        schema: mesh_cells_schemas.apply_textures,
+        params: { id, textures },
+      },
+      {
+        response_function: () => {
+          coloring_style.textures = textures
+          console.log(setMeshCellsTextures.name, { id }, meshCellsTextures(id))
+        },
+      },
+    )
+  }
+
+  function meshCellsVertexAttribute(id) {
+    return meshCellsStyle(id).coloring.vertex
+  }
+
+  function setMeshCellsVertexAttribute(id, vertex_attribute) {
+    const coloring_style = meshCellsStyle(id).coloring
+    return viewer_call(
+      {
+        schema: mesh_cells_schemas.vertex_attribute,
+        params: { id, ...vertex_attribute },
+      },
+      {
+        response_function: () => {
+          coloring_style.vertex = vertex_attribute
+          console.log(
+            setMeshCellsVertexAttribute.name,
+            { id },
+            meshCellsVertexAttribute(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshCellsCellAttribute(id) {
+    return meshCellsStyle(id).coloring.cell
+  }
+  function setMeshCellsCellAttribute(id, cell_attribute) {
+    const coloring_style = meshCellsStyle(id).coloring
+    return viewer_call(
+      {
+        schema: mesh_cells_schemas.cell_attribute,
+        params: { id, ...cell_attribute },
+      },
+      {
+        response_function: () => {
+          coloring_style.cell = cell_attribute
+          console.log(
+            setMeshCellsCellAttribute.name,
+            { id },
+            meshCellsCellAttribute(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshCellsActiveColoring(id) {
+    return meshCellsStyle(id).coloring.active
+  }
+  function setMeshCellsActiveColoring(id, type) {
+    const coloring = meshCellsStyle(id).coloring
+    coloring.active = type
+    console.log(
+      setMeshCellsActiveColoring.name,
+      { id },
+      meshCellsActiveColoring(id),
+    )
+    if (type === "color") {
+      return setMeshCellsColor(id, coloring.color)
+    } else if (type === "textures") {
+      if (coloring.textures === null) {
+        return
+      }
+      return setMeshCellsTextures(id, coloring.textures)
+    } else if (type === "vertex") {
+      if (coloring.vertex === null) {
+        return
+      }
+      return setMeshCellsVertexAttribute(id, coloring.vertex)
+    } else if (type === "cell") {
+      if (coloring.cell === null) {
+        return
+      }
+      return setMeshCellsCellAttribute(id, coloring.cell)
+    } else {
+      throw new Error("Unknown mesh cells coloring type: " + type)
+    }
+  }
+
+  function applyMeshCellsStyle(id) {
+    const style = meshCellsStyle(id)
+    return Promise.all([
+      setMeshCellsVisibility(id, style.visibility),
+      setMeshCellsActiveColoring(id, style.coloring.active),
+    ])
+  }
+
+  return {
+    meshCellsVisibility,
+    meshCellsActiveColoring,
+    meshCellsColor,
+    meshCellsTextures,
+    meshCellsCellAttribute,
+    meshCellsVertexAttribute,
+    setMeshCellsVisibility,
+    setMeshCellsActiveColoring,
+    setMeshCellsColor,
+    setMeshCellsTextures,
+    setMeshCellsVertexAttribute,
+    setMeshCellsCellAttribute,
+    applyMeshCellsStyle,
+  }
+}

package/internal_stores/mesh/index.js

@@ -4,6 +4,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 // Local imports
 import { useMeshPointsStyle } from "./points.js"
 import { useMeshEdgesStyle } from "./edges.js"
+import { useMeshCellsStyle } from "./cells.js"
 import { useMeshPolygonsStyle } from "./polygons.js"
 import { useMeshPolyhedraStyle } from "./polyhedra.js"
 
@@ -12,8 +13,9 @@ const mesh_schemas = viewer_schemas.opengeodeweb_viewer.mesh
 
 export default function useMeshStyle() {
   const dataStyleStore = useDataStyleStore()
-  const pointsStyleStore = useMeshPointsStyle()
-  const edgesStyleStore = useMeshEdgesStyle()
+  const meshPointsStyleStore = useMeshPointsStyle()
+  const meshEdgesStyleStore = useMeshEdgesStyle()
+  const meshCellsStyleStore = useMeshCellsStyle()
   const meshPolygonsStyleStore = useMeshPolygonsStyle()
   const meshPolyhedraStyleStore = useMeshPolyhedraStyle()
   const hybridViewerStore = useHybridViewerStore()
@@ -44,9 +46,11 @@ export default function useMeshStyle() {
       if (key === "visibility") {
         promise_array.push(setMeshVisibility(id, value))
       } else if (key === "points") {
-        promise_array.push(pointsStyleStore.applyMeshPointsStyle(id))
+        promise_array.push(meshPointsStyleStore.applyMeshPointsStyle(id))
       } else if (key === "edges") {
-        promise_array.push(edgesStyleStore.applyMeshEdgesStyle(id))
+        promise_array.push(meshEdgesStyleStore.applyMeshEdgesStyle(id))
+      } else if (key === "cells") {
+        promise_array.push(meshCellsStyleStore.applyMeshCellsStyle(id))
       } else if (key === "polygons") {
         promise_array.push(meshPolygonsStyleStore.applyMeshPolygonsStyle(id))
       } else if (key === "polyhedra") {
@@ -64,6 +68,7 @@ export default function useMeshStyle() {
     applyMeshStyle,
     ...useMeshPointsStyle(),
     ...useMeshEdgesStyle(),
+    ...useMeshCellsStyle(),
     ...useMeshPolygonsStyle(),
     ...useMeshPolyhedraStyle(),
   }

package/internal_stores/mesh/polygons.js

@@ -134,11 +134,20 @@ export function useMeshPolygonsStyle() {
     )
     if (type === "color") {
       return setMeshPolygonsColor(id, coloring.color)
-    } else if (type === "textures" && coloring.textures !== null) {
+    } else if (type === "textures") {
+      if (coloring.textures === null) {
+        return
+      }
       return setMeshPolygonsTextures(id, coloring.textures)
-    } else if (type === "vertex" && coloring.vertex !== null) {
+    } else if (type === "vertex") {
+      if (coloring.vertex === null) {
+        return
+      }
       return setMeshPolygonsVertexAttribute(id, coloring.vertex)
-    } else if (type === "polygon" && coloring.polygon !== null) {
+    } else if (type === "polygon") {
+      if (coloring.polygon === null) {
+        return
+      }
       return setMeshPolygonsPolygonAttribute(id, coloring.polygon)
     } else {
       throw new Error("Unknown mesh polygons coloring type: " + type)

package/package.json

@@ -39,7 +39,7 @@
   },
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "type": "module",
-  "version": "10.0.0-rc.1",
+  "version": "10.0.1-rc.1",
   "main": "./nuxt.config.js",
   "dependencies": {
     "@geode/opengeodeweb-back": "next",

package/tests/integration/microservices/back/requirements.txt

@@ -5,4 +5,4 @@
 #    pip-compile --output-file=tests/integration/microservices/back/requirements.txt tests/integration/microservices/back/requirements.in
 #
 
-opengeodeweb-back==5.*,>=5.13.1rc1
+opengeodeweb-back==5.*,>=5.14.0rc1

package/tests/integration/microservices/viewer/requirements.txt

@@ -5,4 +5,4 @@
 #    pip-compile --output-file=tests/integration/microservices/viewer/requirements.txt tests/integration/microservices/viewer/requirements.in
 #
 
-opengeodeweb-viewer==1.*,>=1.12.0
+opengeodeweb-viewer==1.*,>=1.13.0rc1

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

@@ -0,0 +1,142 @@
+// Third party imports
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest"
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json" with { type: "json" }
+
+// Local imports
+import Status from "@ogw_front/utils/status"
+import {
+  delete_folder_recursive,
+  kill_back,
+  kill_viewer,
+} from "@ogw_front/utils/local"
+import * as composables from "@ogw_front/composables/viewer_call"
+import { setupIntegrationTests } from "../../../setup.js"
+
+// Local constants
+const mesh_cells_schemas = viewer_schemas.opengeodeweb_viewer.mesh.cells
+const file_name = "test.og_rgd2d"
+const geode_object = "RegularGrid2D"
+
+let id, back_port, viewer_port, project_folder_path
+
+beforeEach(async () => {
+  ;({ id, back_port, viewer_port, project_folder_path } =
+    await setupIntegrationTests(file_name, geode_object))
+}, 20000)
+
+afterEach(async () => {
+  console.log(
+    "afterEach mesh cells kill",
+    back_port,
+    viewer_port,
+    project_folder_path,
+  )
+
+  await Promise.all([kill_back(back_port), kill_viewer(viewer_port)])
+  delete_folder_recursive(project_folder_path)
+})
+
+describe("Mesh cells", () => {
+  describe("Cells visibility", () => {
+    test("Visibility true", async () => {
+      const dataStyleStore = useDataStyleStore()
+      const viewerStore = useViewerStore()
+      const visibility = true
+      const spy = vi.spyOn(composables, "viewer_call")
+      await dataStyleStore.setMeshCellsVisibility(id, visibility)
+      expect(spy).toHaveBeenCalledWith(
+        {
+          schema: mesh_cells_schemas.visibility,
+          params: { id, visibility },
+        },
+        {
+          response_function: expect.any(Function),
+        },
+      )
+      expect(dataStyleStore.meshCellsVisibility(id)).toBe(visibility)
+      expect(viewerStore.status).toBe(Status.CONNECTED)
+    })
+  })
+
+  describe("Cells color", () => {
+    test("Color red", async () => {
+      const dataStyleStore = useDataStyleStore()
+      const viewerStore = useViewerStore()
+      const color = { r: 255, g: 0, b: 0 }
+      const spy = vi.spyOn(composables, "viewer_call")
+      await dataStyleStore.setMeshCellsColor(id, color)
+      expect(spy).toHaveBeenCalledWith(
+        {
+          schema: mesh_cells_schemas.color,
+          params: { id, color },
+        },
+        {
+          response_function: expect.any(Function),
+        },
+      )
+      expect(dataStyleStore.meshCellsColor(id)).toStrictEqual(color)
+      expect(viewerStore.status).toBe(Status.CONNECTED)
+    })
+  })
+
+  describe("Cells vertex attribute", () => {
+    test("Coloring vertex attribute", async () => {
+      const dataStyleStore = useDataStyleStore()
+      const viewerStore = useViewerStore()
+      const vertex_attribute = { name: "points" }
+      const spy = vi.spyOn(composables, "viewer_call")
+      await dataStyleStore.setMeshCellsVertexAttribute(id, vertex_attribute)
+      expect(spy).toHaveBeenCalledWith(
+        {
+          schema: mesh_cells_schemas.vertex_attribute,
+          params: { id, ...vertex_attribute },
+        },
+        {
+          response_function: expect.any(Function),
+        },
+      )
+      expect(dataStyleStore.meshCellsVertexAttribute(id)).toStrictEqual(
+        vertex_attribute,
+      )
+      expect(viewerStore.status).toBe(Status.CONNECTED)
+    })
+  })
+
+  describe("Cells cell attribute", () => {
+    test("Coloring cell attribute", async () => {
+      const dataStyleStore = useDataStyleStore()
+      const viewerStore = useViewerStore()
+      const cell_attribute = { name: "RGB_data" }
+      const spy = vi.spyOn(composables, "viewer_call")
+      await dataStyleStore.setMeshCellsCellAttribute(id, cell_attribute)
+      expect(spy).toHaveBeenCalledWith(
+        {
+          schema: mesh_cells_schemas.cell_attribute,
+          params: { id, ...cell_attribute },
+        },
+        {
+          response_function: expect.any(Function),
+        },
+      )
+      expect(dataStyleStore.meshCellsCellAttribute(id)).toStrictEqual(
+        cell_attribute,
+      )
+      expect(viewerStore.status).toBe(Status.CONNECTED)
+    })
+  })
+
+  describe("Cells active coloring", () => {
+    test("test coloring", async () => {
+      const dataStyleStore = useDataStyleStore()
+      const viewerStore = useViewerStore()
+      const coloringTypes = ["color", "vertex", "cell"]
+      for (let i = 0; i < coloringTypes.length; i++) {
+        dataStyleStore.setMeshCellsActiveColoring(id, coloringTypes[i])
+        expect(dataStyleStore.meshCellsActiveColoring(id)).toBe(
+          coloringTypes[i],
+        )
+        expect(viewerStore.status).toBe(Status.CONNECTED)
+      }
+    })
+  })
+})

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

@@ -56,20 +56,7 @@ describe("Mesh edges", () => {
       expect(viewerStore.status).toBe(Status.CONNECTED)
     })
   })
-  describe("Edges active coloring", () => {
-    test("test coloring", async () => {
-      const dataStyleStore = useDataStyleStore()
-      const viewerStore = useViewerStore()
-      const coloringTypes = ["color"]
-      for (let i = 0; i < coloringTypes.length; i++) {
-        dataStyleStore.setMeshEdgesActiveColoring(id, coloringTypes[i])
-        expect(dataStyleStore.meshEdgesActiveColoring(id)).toBe(
-          coloringTypes[i],
-        )
-        expect(viewerStore.status).toBe(Status.CONNECTED)
-      }
-    })
-  })
+
   describe("Edges color", () => {
     test("Color red", async () => {
       const dataStyleStore = useDataStyleStore()
@@ -90,4 +77,19 @@ describe("Mesh edges", () => {
       expect(viewerStore.status).toBe(Status.CONNECTED)
     })
   })
+
+  describe("Edges active coloring", () => {
+    test("test coloring", async () => {
+      const dataStyleStore = useDataStyleStore()
+      const viewerStore = useViewerStore()
+      const coloringTypes = ["color"]
+      for (let i = 0; i < coloringTypes.length; i++) {
+        dataStyleStore.setMeshEdgesActiveColoring(id, coloringTypes[i])
+        expect(dataStyleStore.meshEdgesActiveColoring(id)).toBe(
+          coloringTypes[i],
+        )
+        expect(viewerStore.status).toBe(Status.CONNECTED)
+      }
+    })
+  })
 })

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

@@ -57,20 +57,6 @@ describe("Mesh points", () => {
     })
   })
 
-  describe("Points active coloring", () => {
-    test("test coloring", async () => {
-      const dataStyleStore = useDataStyleStore()
-      const viewerStore = useViewerStore()
-      const coloringTypes = ["color"]
-      for (let i = 0; i < coloringTypes.length; i++) {
-        dataStyleStore.setMeshPointsActiveColoring(id, coloringTypes[i])
-        expect(dataStyleStore.meshPointsActiveColoring(id)).toBe(
-          coloringTypes[i],
-        )
-        expect(viewerStore.status).toBe(Status.CONNECTED)
-      }
-    })
-  })
   describe("Points color", () => {
     test("Color red", async () => {
       const dataStyleStore = useDataStyleStore()
@@ -92,6 +78,21 @@ describe("Mesh points", () => {
     })
   })
 
+  describe("Points active coloring", () => {
+    test("test coloring", async () => {
+      const dataStyleStore = useDataStyleStore()
+      const viewerStore = useViewerStore()
+      const coloringTypes = ["color"]
+      for (let i = 0; i < coloringTypes.length; i++) {
+        dataStyleStore.setMeshPointsActiveColoring(id, coloringTypes[i])
+        expect(dataStyleStore.meshPointsActiveColoring(id)).toBe(
+          coloringTypes[i],
+        )
+        expect(viewerStore.status).toBe(Status.CONNECTED)
+      }
+    })
+  })
+
   describe("Points size", () => {
     test("Size 20", async () => {
       const dataStyleStore = useDataStyleStore()