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

package/app/components/CrsSelector.vue

@@ -34,11 +34,11 @@
   ])
 
   const props = defineProps({
-    input_geode_object: { type: String, required: true },
+    geode_object_type: { type: String, required: true },
     key_to_update: { type: String, required: true },
   })
 
-  const { input_geode_object, key_to_update } = props
+  const { geode_object_type, key_to_update } = props
 
   const search = ref("")
   const data_table_loading = ref(false)
@@ -64,7 +64,7 @@
   }
 
   async function get_crs_table() {
-    const params = { input_geode_object }
+    const params = { geode_object_type }
     toggle_loading()
     await api_fetch(
       { schema, params },

package/app/components/ExtensionSelector.vue

@@ -67,10 +67,10 @@
   ])
 
   const props = defineProps({
-    input_geode_object: { type: String, required: true },
+    geode_object_type: { type: String, required: true },
     filenames: { type: Array, required: true },
   })
-  const { input_geode_object, filenames } = props
+  const { geode_object_type, filenames } = props
   const geode_objects_and_output_extensions = ref({})
   const loading = ref(false)
 
@@ -81,7 +81,7 @@
     geode_objects_and_output_extensions.value = {}
     var promise_array = []
     for (const filename of filenames) {
-      const params = { input_geode_object, filename }
+      const params = { geode_object_type, filename }
       const promise = new Promise((resolve, reject) => {
         api_fetch(
           { schema, params },

package/app/components/FileSelector.vue

@@ -52,9 +52,8 @@
 
   async function get_allowed_files() {
     toggle_loading()
-    const params = { supported_feature }
     await api_fetch(
-      { schema, params },
+      { schema },
       {
         response_function: (response) => {
           accept.value = response._data.extensions

package/app/components/Inspector/InspectionButton.vue

@@ -3,7 +3,7 @@
     <v-btn
       :loading="loading"
       color="primary"
-      @click="get_inspection_results(props.input_geode_object, props.filename)"
+      @click="get_inspection_results(props.geode_object_type, props.filename)"
     >
       Inspect
       <template #loader>
@@ -24,15 +24,15 @@
     "decrement_step",
   ])
   const props = defineProps({
-    input_geode_object: { type: String, required: true },
+    geode_object_type: { type: String, required: true },
     filename: { type: String, required: true },
   })
   const loading = ref(false)
   const toggle_loading = useToggle(loading)
 
-  async function get_inspection_results(input_geode_object, filename) {
+  async function get_inspection_results(geode_object_type, filename) {
     toggle_loading()
-    const params = { input_geode_object, filename }
+    const params = { geode_object_type, filename }
 
     await api_fetch(
       { schema, params },

package/app/components/MissingFilesSelector.vue

@@ -58,11 +58,11 @@
 
   const props = defineProps({
     multiple: { type: Boolean, required: true },
-    input_geode_object: { type: String, required: true },
+    geode_object_type: { type: String, required: true },
     filenames: { type: Array, required: true },
   })
 
-  const { multiple, input_geode_object, filenames } = props
+  const { multiple, geode_object_type, filenames } = props
 
   const accept = ref("")
   const loading = ref(false)
@@ -84,7 +84,7 @@
     var promise_array = []
 
     for (const filename of filenames) {
-      const params = { input_geode_object, filename }
+      const params = { geode_object_type, filename }
       const promise = new Promise((resolve, reject) => {
         api_fetch(
           { schema, params },

package/app/components/ObjectSelector.vue

@@ -109,7 +109,7 @@
     toggle_loading()
     allowed_objects.value = {}
     const promise_array = filenames.map((filename) => {
-      const params = { filename, supported_feature }
+      const params = { filename }
       return api_fetch({ schema, params })
     })
     const responses = await Promise.all(promise_array)
@@ -141,9 +141,9 @@
     toggle_loading()
   }
 
-  function set_geode_object(input_geode_object) {
-    if (input_geode_object) {
-      emit("update_values", { input_geode_object })
+  function set_geode_object(geode_object_type) {
+    if (geode_object_type) {
+      emit("update_values", { geode_object_type })
       emit("increment_step")
     }
   }
@@ -155,6 +155,7 @@
     filter: opacity(0.7);
     cursor: pointer;
   }
+
   .disabled div {
     cursor: not-allowed;
   }

package/app/components/Viewer/BreadCrumb.vue

@@ -21,7 +21,7 @@
             }}
           </v-icon>
           <span class="text-subtitle-1 font-weight-regular align-center mt-1">
-            Model Explorer ({{ metaDatas.displayed_name }})
+            Model Explorer ({{ metaDatas.name }})
           </span>
         </template>
       </v-menu>

package/app/components/Viewer/ContextMenu.vue

@@ -104,8 +104,8 @@
 
   const menu_items = computed(() =>
     menuStore.getMenuItems(
-      meta_data.value.object_type,
-      meta_data.value.geode_object,
+      meta_data.value.viewer_type,
+      meta_data.value.geode_object_type,
     ),
   )
 

package/app/components/Viewer/Generic/Mesh/CellsOptions.vue

@@ -0,0 +1,81 @@
+<template>
+  <ViewerContextMenuItem
+    :itemProps="props.itemProps"
+    :tooltip="props.tooltip"
+    :btn_image="props.btn_image"
+  >
+    <template #options>
+      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <template v-if="visibility">
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+          v-model:textures="textures"
+          v-model:vertex_attribute="vertex_attribute"
+          v-model:cell_attribute="cell_attribute"
+        />
+      </template>
+    </template>
+  </ViewerContextMenuItem>
+</template>
+
+<script setup>
+  import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem.vue"
+  import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue"
+  import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue"
+
+  const dataStyleStore = useDataStyleStore()
+  const hybridViewerStore = useHybridViewerStore()
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+    btn_image: { type: String, required: true },
+    tooltip: { type: String, required: false, default: "Cells options" },
+  })
+
+  const id = toRef(() => props.itemProps.id)
+
+  const visibility = computed({
+    get: () => dataStyleStore.meshCellsVisibility(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshCellsVisibility(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const coloring_style_key = computed({
+    get: () => dataStyleStore.meshCellsActiveColoring(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshCellsActiveColoring(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const color = computed({
+    get: () => dataStyleStore.meshCellsColor(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshCellsColor(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const textures = computed({
+    get: () => dataStyleStore.meshCellsTextures(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshCellsTextures(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute = computed({
+    get: () => dataStyleStore.meshCellsVertexAttribute(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshCellsVertexAttribute(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const cell_attribute = computed({
+    get: () => dataStyleStore.meshCellsCellAttribute(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshCellsCellAttribute(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+</script>

package/app/components/Viewer/Grid/2D/CellsOptions.vue

@@ -1,5 +1,5 @@
 <template>
-  <ViewerGenericMeshPolygonsOptions
+  <ViewerGenericMeshCellsOptions
     :itemProps="props.itemProps"
     :btn_image="Grid2D_Cells"
     tooltip="Cells options"
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-  import ViewerGenericMeshPolygonsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PolygonsOptions.vue"
+  import ViewerGenericMeshCellsOptions from "@ogw_front/components/Viewer/Generic/Mesh/CellsOptions.vue"
   import Grid2D_Cells from "@ogw_front/assets/viewer_svgs/grid_2d_cells.svg"
 
   const props = defineProps({

package/app/components/Viewer/Grid/3D/CellsOptions.vue

@@ -1,5 +1,5 @@
 <template>
-  <ViewerGenericMeshPolyhedraOptions
+  <ViewerGenericMeshCellsOptions
     :itemProps="props.itemProps"
     :btn_image="Grid3DCells"
     tooltip="Cells options"
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-  import ViewerGenericMeshPolyhedraOptions from "@ogw_front/components/Viewer/Generic/Mesh/PolyhedraOptions.vue"
+  import ViewerGenericMeshCellsOptions from "@ogw_front/components/Viewer/Generic/Mesh/CellsOptions.vue"
   import Grid3DCells from "@ogw_front/assets/viewer_svgs/grid_3d_cells.svg"
 
   const props = defineProps({

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

@@ -0,0 +1,52 @@
+<template>
+  <v-select
+    v-model="cell_attribute_name"
+    :items="cell_attribute_names"
+    label="Select an attribute"
+    density="compact"
+  />
+</template>
+
+<script setup>
+  import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
+
+  const props = defineProps({
+    id: { type: String, required: true },
+  })
+
+  const model = defineModel()
+  const cell_attribute_name = ref("")
+  const cell_attribute_names = ref([])
+  const cell_attribute = reactive({ name: cell_attribute_name.value })
+
+  onMounted(() => {
+    if (model.value != null) {
+      cell_attribute_name.value = model.value.name
+    }
+  })
+
+  watch(cell_attribute_name, (value) => {
+    cell_attribute.name = value
+    model.value = cell_attribute
+  })
+
+  onMounted(() => {
+    getCellAttributes()
+  })
+
+  function getCellAttributes() {
+    api_fetch(
+      {
+        schema: back_schemas.opengeodeweb_back.cell_attribute_names,
+        params: {
+          id: props.id,
+        },
+      },
+      {
+        response_function: (response) => {
+          cell_attribute_names.value = response._data.cell_attribute_names
+        },
+      },
+    )
+  }
+</script>

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

@@ -37,6 +37,12 @@
           <!-- <template v-if="coloring_style_key === edge_dict['value']">
             <ViewerOptionsEdgeAttributeSelector v-model="edge_attribute" :id="id" />
           </template> -->
+          <template v-if="coloring_style_key === cell_dict['value']">
+            <ViewerOptionsCellAttributeSelector
+              v-model="cell_attribute"
+              :id="id"
+            />
+          </template>
           <template v-if="coloring_style_key === polygon_dict['value']">
             <ViewerOptionsPolygonAttributeSelector
               v-model="polygon_attribute"
@@ -61,6 +67,7 @@
   import ViewerOptionsVertexAttributeSelector from "@ogw_front/components/Viewer/Options/VertexAttributeSelector.vue"
   // import ViewerOptionsEdgeAttributeSelector from "@ogw_front/components/Viewer/Options/EdgeAttributeSelector.vue"
   import ViewerOptionsPolygonAttributeSelector from "@ogw_front/components/Viewer/Options/PolygonAttributeSelector.vue"
+  import ViewerOptionsCellAttributeSelector from "@ogw_front/components/Viewer/Options/CellAttributeSelector.vue"
   import ViewerOptionsPolyhedronAttributeSelector from "@ogw_front/components/Viewer/Options/PolyhedronAttributeSelector.vue"
 
   const coloring_style_key = defineModel("coloring_style_key")
@@ -69,6 +76,7 @@
   const textures = defineModel("textures")
   const vertex_attribute = defineModel("vertex_attribute")
   // const edge_attribute = defineModel("edge_attribute");
+  const cell_attribute = defineModel("cell_attribute")
   const polygon_attribute = defineModel("polygon_attribute")
   const polyhedron_attribute = defineModel("polyhedron_attribute")
 
@@ -83,6 +91,10 @@
   const has_vertex = computed(() =>
     vertex_attribute.value !== undefined ? true : false,
   )
+  // const has_edge = computed(() => (edge_attribute.value !== undefined ? true : false));
+  const has_cells = computed(() =>
+    cell_attribute.value !== undefined ? true : false,
+  )
   const has_polygons = computed(() =>
     polygon_attribute.value !== undefined ? true : false,
   )
@@ -93,7 +105,8 @@
   const color_dict = { name: "Color", value: "color" }
   const textures_dict = { name: "Textures", value: "textures" }
   const vertex_dict = { name: "Vertex attribute", value: "vertex" }
-  // const edge_dict = { name: "Edge attribute", value: "edge" };
+  // const edge_dict = { name: "Edge attribute", value: "edge" }
+  const cell_dict = { name: "Cell attribute", value: "cell" }
   const polygon_dict = { name: "Polygon attribute", value: "polygon" }
   const polyhedron_dict = {
     name: "Polyhedron attribute",
@@ -105,6 +118,7 @@
     if (has_textures.value) array.push(textures_dict)
     if (has_vertex.value) array.push(vertex_dict)
     // if (has_edges.value) array.push(edge_dict);
+    if (has_cells.value) array.push(cell_dict)
     if (has_polygons.value) array.push(polygon_dict)
     if (has_polyhedra.value) array.push(polyhedron_dict)
 

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

@@ -31,10 +31,10 @@
   })
 
   onMounted(() => {
-    getVertexAttributes()
+    getPolygonAttributes()
   })
 
-  function getVertexAttributes() {
+  function getPolygonAttributes() {
     api_fetch(
       {
         schema: back_schemas.opengeodeweb_back.polygon_attribute_names,

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

@@ -81,7 +81,7 @@
         {
           schema: back_schemas.opengeodeweb_back.save_viewable_file,
           params: {
-            input_geode_object: "RasterImage2D",
+            geode_object_type: "RasterImage2D",
             filename: value[0].name,
           },
         },

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

@@ -12,7 +12,12 @@
 
   const model = defineModel()
 
+  const props = defineProps({
+    id: { type: String, required: true },
+  })
+
   const vertex_attribute_name = ref("")
+  const vertex_attribute_names = ref([])
 
   onMounted(() => {
     if (model.value != null) {
@@ -26,14 +31,6 @@
     model.value = vertex_attribute
   })
 
-  const props = defineProps({
-    id: { type: String, required: true },
-  })
-
-  const dataBaseStore = useDataBaseStore()
-
-  const vertex_attribute_names = ref([])
-
   onMounted(() => {
     getVertexAttributes()
   })

package/app/components/Viewer/TreeObject.vue

@@ -63,7 +63,7 @@
         dataStyleStore.setVisibility(item.id, false)
 
         const objectMeta = dataBaseStore.itemMetaDatas(item.id)
-        if (objectMeta.object_type === "mesh") {
+        if (objectMeta.viewer_type === "mesh") {
           if (dataBaseStore.db[item.id]?.mesh_components_selection) {
             dataBaseStore.db[item.id].mesh_components_selection = []
           }
@@ -77,7 +77,7 @@
   )
 
   function isModel(item) {
-    return item.object_type === "model"
+    return item.viewer_type === "model"
   }
 
   onMounted(() => {

package/app/composables/project_manager.js

@@ -92,18 +92,9 @@ export function useProjectManager() {
     const items = Object.entries(snapshotDataBase).map(function (pair) {
       const id = pair[0]
       const item = pair[1]
-      const binaryLightViewable =
-        item && item.vtk_js && item.vtk_js.binary_light_viewable
-          ? item.vtk_js.binary_light_viewable
-          : undefined
       return {
         id: id,
-        object_type: item.object_type,
-        geode_object: item.geode_object,
-        native_filename: item.native_filename,
-        viewable_filename: item.viewable_filename,
-        displayed_name: item.displayed_name,
-        vtk_js: { binary_light_viewable: binaryLightViewable },
+        ...item,
       }
     })
 

package/app/stores/data_base.js

@@ -51,12 +51,12 @@ export const useDataBaseStore = defineStore("dataBase", () => {
   async function addItem(
     id,
     value = {
-      object_type,
-      geode_object,
-      native_filename,
-      viewable_filename,
-      displayed_name,
-      vtk_js: { binary_light_viewable },
+      viewer_type,
+      geode_object_type,
+      native_file,
+      viewable_file,
+      name,
+      binary_light_viewable,
     },
   ) {
     db[id] = value
@@ -125,14 +125,7 @@ export const useDataBaseStore = defineStore("dataBase", () => {
     for (const [id, item] of Object.entries(db)) {
       if (!item) continue
       snapshotDb[id] = {
-        object_type: item.object_type,
-        geode_object: item.geode_object,
-        native_filename: item.native_filename,
-        viewable_filename: item.viewable_filename,
-        displayed_name: item.displayed_name,
-        vtk_js: {
-          binary_light_viewable: item?.vtk_js?.binary_light_viewable,
-        },
+        ...item,
       }
     }
     return { db: snapshotDb }

package/app/stores/data_style.js

@@ -19,23 +19,23 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
       "dataBaseStore.itemMetaDatas(id)",
       dataBaseStore.itemMetaDatas(id),
     )
-    const object_type = dataBaseStore.itemMetaDatas(id).object_type
-    if (object_type === "mesh") {
+    const { viewer_type } = dataBaseStore.itemMetaDatas(id)
+    if (viewer_type === "mesh") {
       return Promise.all([meshStyleStore.setMeshVisibility(id, visibility)])
-    } else if (object_type === "model") {
+    } else if (viewer_type === "model") {
       return Promise.all([modelStyleStore.setModelVisibility(id, visibility)])
     }
-    throw new Error("Unknown object_type")
+    throw new Error("Unknown viewer_type")
   }
 
   function applyDefaultStyle(id) {
-    const { object_type } = dataBaseStore.itemMetaDatas(id)
-    if (object_type === "mesh") {
+    const { viewer_type } = dataBaseStore.itemMetaDatas(id)
+    if (viewer_type === "mesh") {
       return meshStyleStore.applyMeshStyle(id)
-    } else if (object_type === "model") {
+    } else if (viewer_type === "model") {
       return modelStyleStore.applyModelStyle(id)
     } else {
-      throw new Error("Unknown object_type: " + object_type)
+      throw new Error("Unknown viewer_type: " + viewer_type)
     }
   }
 
@@ -58,11 +58,11 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
     const promises = []
     for (const id of ids) {
       const meta = dataBaseStore.itemMetaDatas(id)
-      const objectType = meta?.object_type
+      const viewerType = meta?.viewer_type
       const style = dataStyleState.styles[id]
-      if (style && objectType === "mesh") {
+      if (style && viewerType === "mesh") {
         promises.push(meshStyleStore.applyMeshStyle(id))
-      } else if (style && objectType === "model") {
+      } else if (style && viewerType === "model") {
         promises.push(modelStyleStore.applyModelStyle(id))
       }
     }

package/app/stores/feedback.js

@@ -4,7 +4,7 @@ export const useFeedbackStore = defineStore("feedback", {
   state: () => ({
     feedbacks: [],
     server_error: false,
-    feedbacks_timeout_miliseconds: 5000,
+    feedbacks_timeout_miliseconds: 10 * 1000,
   }),
   actions: {
     async add_error(code, route, name, description) {

package/app/stores/hybrid_viewer.js

@@ -56,7 +56,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     const reader = vtkXMLPolyDataReader.newInstance()
     const textEncoder = new TextEncoder()
     await reader.parseAsArrayBuffer(
-      textEncoder.encode(value.vtk_js.binary_light_viewable),
+      textEncoder.encode(value.binary_light_viewable),
     )
     const polydata = reader.getOutputData(0)
     const mapper = vtkMapper.newInstance()

package/app/stores/menu.js

@@ -64,7 +64,7 @@ const Grid2D_menu = [
 const Grid3D_menu = [
   Grid3DPointsOptions,
   Grid3DEdgesOptions,
-  Grid3DFacetsOptions,
+  // Grid3DFacetsOptions,
   Grid3DCellsOptions,
 ]
 

package/app/stores/treeview.js

@@ -11,11 +11,11 @@ export const useTreeviewStore = defineStore("treeview", () => {
   const pendingSelectionIds = ref([])
 
   // /** Functions **/
-  function addItem(geodeObject, displayed_name, id, object_type) {
-    const child = { title: displayed_name, id, object_type }
+  function addItem(geode_object_type, name, id, viewer_type) {
+    const child = { title: name, id, viewer_type }
 
     for (let i = 0; i < items.value.length; i++) {
-      if (items.value[i].title === geodeObject) {
+      if (items.value[i].title === geode_object_type) {
         items.value[i].children.push(child)
         items.value[i].children.sort((a, b) =>
           a.title.localeCompare(b.title, undefined, {
@@ -27,7 +27,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
         return
       }
     }
-    items.value.push({ title: geodeObject, children: [child] })
+    items.value.push({ title: geode_object_type, children: [child] })
     selection.value.push(child)
   }
 

package/app/stores/viewer.js

@@ -105,9 +105,8 @@ export const useViewerStore = defineStore("viewer", {
         })
 
         // Connect
-        const { connectImageStream } = await import(
-          "@kitware/vtk.js/Rendering/Misc/RemoteView"
-        )
+        const { connectImageStream } =
+          await import("@kitware/vtk.js/Rendering/Misc/RemoteView")
         const viewer_store = this
         return new Promise((resolve, reject) => {
           clientToConnect