@geode/opengeodeweb-front 10.22.1 → 10.23.0-rc.2

package/app/components/Viewer/Generic/Model/ModelStyleCard.vue

@@ -7,6 +7,11 @@ import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
+import BlocksOptions from "./BlocksOptions.vue";
+import CornersOptions from "./CornersOptions.vue";
+import LinesOptions from "./LinesOptions.vue";
+import SurfacesOptions from "./SurfacesOptions.vue";
+
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const dataStore = useDataStore();
@@ -26,108 +31,58 @@ const { itemProps } = defineProps({
 
 const modelId = computed(() => itemProps.meta_data.modelId || itemProps.id);
 const componentId = computed(() => itemProps.meta_data.pickedComponentId);
-const selection = dataStyleStore.visibleMeshComponents(modelId.value);
+const selection = computed(() => dataStyleStore.visibleMeshComponents(modelId.value).value || []);
 const componentType = ref(undefined);
 
-watchEffect(async () => {
-  if (itemProps.meta_data.viewer_type === "model_component_type") {
-    componentType.value = itemProps.meta_data.modelComponentType;
-  } else if (componentId.value && modelId.value) {
-    componentType.value = await dataStore.meshComponentType(modelId.value, componentId.value);
-  } else {
+watch(
+  () => [
+    modelId.value,
+    componentId.value,
+    itemProps.meta_data.viewer_type,
+    itemProps.meta_data.modelComponentType,
+  ],
+  async () => {
     componentType.value = undefined;
-  }
-});
-
-const modelVisibility = computed({
-  get: () => dataStyleStore.modelVisibility(modelId.value),
-  set: async (newValue) => {
-    await dataStyleStore.setModelVisibility(modelId.value, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const modelComponentTypeVisibility = computed({
-  get: () => selection.value.includes(componentType.value),
-  set: async (newValue) => {
-    const targetTypes = getBatchComponentIds(componentType.value);
-    const promises = targetTypes.map((type) =>
-      dataStyleStore.setModelComponentTypeVisibility(modelId.value, type, newValue),
-    );
-    await Promise.all(promises);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const componentVisibility = computed({
-  get: () => selection.value.includes(componentId.value),
-  set: async (newValue) => {
-    const targetIds = getBatchComponentIds(componentId.value);
-    await dataStyleStore.setModelComponentsVisibility(modelId.value, targetIds, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-
-const componentColor = computed({
-  get: () =>
-    componentId.value
-      ? dataStyleStore.getModelComponentEffectiveColor(
-          modelId.value,
-          componentId.value,
-          componentType.value,
-        )
-      : undefined,
-  set: async (color) => {
-    if (componentId.value) {
-      const targetIds = getBatchComponentIds(componentId.value);
-      await dataStyleStore.setModelComponentsColor(modelId.value, targetIds, color);
-      hybridViewerStore.remoteRender();
-    }
-  },
-});
-
-const modelComponentTypeColor = computed({
-  get: () =>
-    componentType.value
-      ? dataStyleStore.getModelComponentTypeColor(modelId.value, componentType.value)
-      : undefined,
-  set: async (color) => {
-    if (componentType.value) {
-      const targetTypes = getBatchComponentIds(componentType.value);
-      const promises = targetTypes.map((type) =>
-        dataStyleStore.setModelComponentTypeColor(modelId.value, type, color),
-      );
-      await Promise.all(promises);
-      hybridViewerStore.remoteRender();
+    if (itemProps.meta_data.viewer_type === "model_component_type") {
+      componentType.value = itemProps.meta_data.modelComponentType;
+    } else if (componentId.value && modelId.value) {
+      const currentModelId = modelId.value;
+      const currentCompId = componentId.value;
+      const type = await dataStore.meshComponentType(currentModelId, currentCompId);
+      if (
+        modelId.value === currentModelId &&
+        componentId.value === currentCompId &&
+        itemProps.meta_data.viewer_type !== "model_component_type"
+      ) {
+        componentType.value = type;
+      }
     }
   },
-});
+  { immediate: true },
+);
 
-const modelComponentTypeColorMode = computed({
-  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId.value, componentType.value),
-  set: async (colorMode) => {
-    if (componentType.value) {
-      const targetTypes = getBatchComponentIds(componentType.value);
-      const promises = targetTypes.map((type) =>
-        dataStyleStore.setModelComponentTypeColorMode(modelId.value, type, colorMode),
-      );
-      await Promise.all(promises);
-      hybridViewerStore.remoteRender();
+const targetComponentIds = ref([]);
+watch(
+  () => [modelId.value, componentType.value],
+  async () => {
+    targetComponentIds.value = [];
+    if (componentType.value && modelId.value) {
+      const currentModelId = modelId.value;
+      const currentType = componentType.value;
+      const ids = await dataStore.getMeshComponentGeodeIds(currentModelId, currentType);
+      if (modelId.value === currentModelId && componentType.value === currentType) {
+        targetComponentIds.value = ids;
+      }
     }
   },
-});
+  { immediate: true },
+);
 
-const componentColorMode = computed({
-  get: () => dataStyleStore.getModelComponentColorMode(modelId.value, componentId.value),
-  set: async (colorMode) => {
-    if (componentId.value) {
-      const targetIds = getBatchComponentIds(componentId.value);
-      const promises = targetIds.map((id) =>
-        dataStyleStore.setModelComponentColorMode(modelId.value, id, colorMode),
-      );
-      await Promise.all(promises);
-      hybridViewerStore.remoteRender();
-    }
+const modelVisibility = computed({
+  get: () => dataStyleStore.modelVisibility(modelId.value),
+  set: async (newValue) => {
+    await dataStyleStore.setModelVisibility(modelId.value, newValue);
+    hybridViewerStore.remoteRender();
   },
 });
 
@@ -136,10 +91,6 @@ const colorModes = [
   { title: "Random", value: "random" },
 ];
 
-const modelComponentTypeLabel = computed(() =>
-  componentType.value ? `${componentType.value}s Options` : "",
-);
-
 const modelComponentsColorMode = ref("constant");
 
 const modelComponentsColor = computed({
@@ -198,41 +149,30 @@ watch(modelComponentsColorMode, async (colorMode) => {
       </template>
     </OptionsSection>
 
-    <OptionsSection v-if="componentType" :title="modelComponentTypeLabel" class="mt-6">
-      <VisibilitySwitch v-model="modelComponentTypeVisibility" />
-      <v-label class="text-caption mb-1 mt-2">Color Mode</v-label>
-      <v-select
-        v-model="modelComponentTypeColorMode"
-        :items="colorModes"
-        density="compact"
-        hide-details
-        class="mb-3"
-        variant="outlined"
-      />
-
-      <template v-if="modelComponentTypeColorMode === 'constant'">
-        <v-label class="text-caption mb-1">Color</v-label>
-        <ViewerOptionsColorPicker v-model="modelComponentTypeColor" />
-      </template>
-    </OptionsSection>
-
-    <OptionsSection v-if="componentId" title="Component Options" class="mt-6">
-      <VisibilitySwitch v-model="componentVisibility" />
-      <v-label class="text-caption mb-1 mt-2">Color Mode</v-label>
-      <v-select
-        v-model="componentColorMode"
-        :items="colorModes"
-        density="compact"
-        hide-details
-        class="mb-3"
-        variant="outlined"
-      />
-
-      <template v-if="componentColorMode === 'constant'">
-        <v-label class="text-caption mb-1">Color</v-label>
-        <ViewerOptionsColorPicker v-model="componentColor" />
-      </template>
-    </OptionsSection>
+    <BlocksOptions
+      v-if="componentType === 'Block'"
+      :modelId="modelId"
+      :blockId="componentId"
+      :targetBlockIds="targetComponentIds"
+    />
+    <SurfacesOptions
+      v-else-if="componentType === 'Surface'"
+      :modelId="modelId"
+      :surfaceId="componentId"
+      :targetSurfaceIds="targetComponentIds"
+    />
+    <LinesOptions
+      v-else-if="componentType === 'Line'"
+      :modelId="modelId"
+      :lineId="componentId"
+      :targetLineIds="targetComponentIds"
+    />
+    <CornersOptions
+      v-else-if="componentType === 'Corner'"
+      :modelId="modelId"
+      :cornerId="componentId"
+      :targetCornerIds="targetComponentIds"
+    />
   </v-sheet>
 </template>
 

package/app/components/Viewer/Generic/Model/SurfacesOptions.vue

@@ -0,0 +1,260 @@
+<script setup>
+import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const { modelId, surfaceId, targetSurfaceIds } = defineProps({
+  modelId: { type: String, required: true },
+  surfaceId: { type: String, default: undefined },
+  targetSurfaceIds: { type: Array, required: true },
+});
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+// Visibility
+const surfacesVisibility = computed({
+  get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Surface"),
+  set: async (newValue) => {
+    await dataStyleStore.setModelComponentTypeVisibility(modelId, "Surface", newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const surfaceVisibility = computed({
+  get: () => dataStyleStore.modelSurfaceVisibility(modelId, surfaceId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesVisibility(modelId, [surfaceId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+// Color
+const surfacesColor = computed({
+  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Surface"),
+  set: async (color) => {
+    await dataStyleStore.setModelComponentTypeColor(modelId, "Surface", color);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const surfaceColor = computed({
+  get: () => dataStyleStore.modelSurfaceColor(modelId, surfaceId),
+  set: async (color) => {
+    if (surfaceId) {
+      await dataStyleStore.setModelSurfacesColor(modelId, [surfaceId], color);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
+const surfacesColorMode = computed({
+  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId, "Surface"),
+  set: async (colorMode) => {
+    await dataStyleStore.setModelComponentTypeColorMode(modelId, "Surface", colorMode);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const surfaceColorMode = computed({
+  get: () => dataStyleStore.modelSurfaceColorMode(modelId, surfaceId),
+  set: async (colorMode) => {
+    if (surfaceId) {
+      await dataStyleStore.setModelComponentColorMode(modelId, surfaceId, colorMode);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
+// Group Attributes
+const surfacesVertexAttributeName = computed({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeName(modelId, targetSurfaceIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesVertexAttributeName(modelId, targetSurfaceIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const surfacesVertexAttributeRange = computed({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeRange(modelId, targetSurfaceIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesVertexAttributeRange(
+      modelId,
+      targetSurfaceIds,
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const surfacesVertexAttributeColorMap = computed({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeColorMap(modelId, targetSurfaceIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesVertexAttributeColorMap(
+      modelId,
+      targetSurfaceIds,
+      newValue,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const surfacesPolygonAttributeName = computed({
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId, targetSurfaceIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesPolygonAttributeName(modelId, targetSurfaceIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const surfacesPolygonAttributeRange = computed({
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeRange(modelId, targetSurfaceIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesPolygonAttributeRange(
+      modelId,
+      targetSurfaceIds,
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const surfacesPolygonAttributeColorMap = computed({
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeColorMap(modelId, targetSurfaceIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesPolygonAttributeColorMap(
+      modelId,
+      targetSurfaceIds,
+      newValue,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+// Individual Attributes
+const vertexAttributeName = computed({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeName(modelId, surfaceId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesVertexAttributeName(modelId, [surfaceId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeRange = computed({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeRange(modelId, surfaceId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesVertexAttributeRange(
+      modelId,
+      [surfaceId],
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeColorMap = computed({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeColorMap(modelId, surfaceId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesVertexAttributeColorMap(modelId, [surfaceId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const polygonAttributeName = computed({
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId, surfaceId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesPolygonAttributeName(modelId, [surfaceId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const polygonAttributeRange = computed({
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeRange(modelId, surfaceId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesPolygonAttributeRange(
+      modelId,
+      [surfaceId],
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const polygonAttributeColorMap = computed({
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeColorMap(modelId, surfaceId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesPolygonAttributeColorMap(modelId, [surfaceId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const capabilities = {
+  color: { available: true },
+  textures: { available: false },
+  vertex: { available: true },
+  edge: { available: false },
+  cell: { available: false },
+  polygon: { available: true },
+  polyhedron: { available: false },
+};
+
+const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attribute_names;
+const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_attribute_names;
+</script>
+
+<template>
+  <div>
+    <OptionsSection title="Surfaces Options" class="mt-6">
+      <VisibilitySwitch v-model="surfacesVisibility" />
+      <v-row class="mt-2 pa-0">
+        <v-col class="pa-0">
+          <ViewerOptionsColoringTypeSelector
+            :id="modelId"
+            :componentId="targetSurfaceIds[0]"
+            v-model:coloring_style_key="surfacesColorMode"
+            v-model:color="surfacesColor"
+            v-model:vertex_attribute_name="surfacesVertexAttributeName"
+            v-model:vertex_attribute_range="surfacesVertexAttributeRange"
+            v-model:vertex_attribute_color_map="surfacesVertexAttributeColorMap"
+            v-model:polygon_attribute_name="surfacesPolygonAttributeName"
+            v-model:polygon_attribute_range="surfacesPolygonAttributeRange"
+            v-model:polygon_attribute_color_map="surfacesPolygonAttributeColorMap"
+            :capabilities="capabilities"
+            :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
+            :allowRandom="true"
+          />
+        </v-col>
+      </v-row>
+    </OptionsSection>
+
+    <OptionsSection v-if="surfaceId" title="Component Options" class="mt-6">
+      <VisibilitySwitch v-model="surfaceVisibility" />
+      <v-row class="mt-2 pa-0">
+        <v-col class="pa-0">
+          <ViewerOptionsColoringTypeSelector
+            :id="modelId"
+            :componentId="surfaceId"
+            v-model:coloring_style_key="surfaceColorMode"
+            v-model:color="surfaceColor"
+            v-model:vertex_attribute_name="vertexAttributeName"
+            v-model:vertex_attribute_range="vertexAttributeRange"
+            v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+            v-model:polygon_attribute_name="polygonAttributeName"
+            v-model:polygon_attribute_range="polygonAttributeRange"
+            v-model:polygon_attribute_color_map="polygonAttributeColorMap"
+            :capabilities="capabilities"
+            :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
+            :allowRandom="true"
+          />
+        </v-col>
+      </v-row>
+    </OptionsSection>
+  </div>
+</template>

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

@@ -8,8 +8,9 @@ const name = defineModel("name", { type: String });
 const range = defineModel("range", { type: Array });
 const colorMap = defineModel("colorMap", { type: String });
 
-const { id, schema } = defineProps({
+const { id, componentId, schema } = defineProps({
   id: { type: String, required: true },
+  componentId: { type: String, default: undefined },
   schema: { type: Object, required: true },
 });
 
@@ -49,7 +50,13 @@ function resetRange() {
 }
 
 function getAttributes() {
+  if (schema.properties?.component_id && componentId === undefined) {
+    return;
+  }
   const params = { id };
+  if (componentId !== undefined) {
+    params.component_id = componentId;
+  }
   backStore.request(
     { schema, params },
     {
@@ -65,7 +72,7 @@ onMounted(() => {
 });
 
 watch(
-  () => [id, schema],
+  () => [id, componentId, schema],
   () => {
     getAttributes();
   },
@@ -86,6 +93,12 @@ watch(
     }
   },
 );
+
+watch(name, (newName, oldName) => {
+  if (newName !== oldName) {
+    resetRange();
+  }
+});
 </script>
 
 <template>

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

@@ -29,14 +29,36 @@ const polyhedron_attribute_name = defineModel("polyhedron_attribute_name");
 const polyhedron_attribute_range = defineModel("polyhedron_attribute_range");
 const polyhedron_attribute_color_map = defineModel("polyhedron_attribute_color_map");
 
-const { id, capabilities } = defineProps({
+const {
+  id,
+  componentId,
+  capabilities,
+  schemas,
+  allowRandom = false,
+} = defineProps({
   id: { type: String, required: true },
+  componentId: { type: String, default: undefined },
   capabilities: {
     type: Object,
     default: () => ({}),
   },
+  schemas: {
+    type: Object,
+    default: () => ({}),
+  },
+  allowRandom: {
+    type: Boolean,
+    default: false,
+  },
 });
 
+const vertexSchema = schemas.vertex || back_schemas.opengeodeweb_back.vertex_attribute_names;
+const edgeSchema = schemas.edge || back_schemas.opengeodeweb_back.edge_attribute_names;
+const cellSchema = schemas.cell || back_schemas.opengeodeweb_back.cell_attribute_names;
+const polygonSchema = schemas.polygon || back_schemas.opengeodeweb_back.polygon_attribute_names;
+const polyhedronSchema =
+  schemas.polyhedron || back_schemas.opengeodeweb_back.polyhedron_attribute_names;
+
 function isAvailable(key) {
   if (capabilities[key] && capabilities[key].available === false) {
     return false;
@@ -75,6 +97,7 @@ const has_polyhedra = computed(
 );
 
 const color_dict = { name: "Color", value: "color" };
+const random_dict = { name: "Random color", value: "random" };
 const textures_dict = { name: "Textures", value: "textures" };
 const vertex_dict = { name: "Vertex attribute", value: "vertex" };
 const edge_dict = { name: "Edge attribute", value: "edge" };
@@ -88,6 +111,9 @@ const coloring_styles = computed(() => {
   const array = [];
   if (has_color.value) {
     array.push(color_dict);
+    if (allowRandom) {
+      array.push(random_dict);
+    }
   }
   if (has_textures.value) {
     array.push(textures_dict);
@@ -114,14 +140,25 @@ const coloring_styles = computed(() => {
   return { labels, values };
 });
 
-const coloring_style_label = ref(
-  coloring_styles.value.labels[coloring_styles.value.values.indexOf(coloring_style_key.value)],
-);
+const coloring_style_label = ref("");
 
 watch(coloring_style_label, (value) => {
-  coloring_style_key.value =
-    coloring_styles.value.values[coloring_styles.value.labels.indexOf(value)];
+  const index = coloring_styles.value.labels.indexOf(value);
+  if (index !== -1) {
+    coloring_style_key.value = coloring_styles.value.values[index];
+  }
 });
+
+watch(
+  coloring_style_key,
+  (value) => {
+    const index = coloring_styles.value.values.indexOf(value);
+    if (index !== -1) {
+      coloring_style_label.value = coloring_styles.value.labels[index];
+    }
+  },
+  { immediate: true },
+);
 </script>
 <template>
   <v-row justify="center" align="center">
@@ -155,7 +192,8 @@ watch(coloring_style_label, (value) => {
               v-model:range="vertex_attribute_range"
               v-model:colorMap="vertex_attribute_color_map"
               :id="id"
-              :schema="back_schemas.opengeodeweb_back.vertex_attribute_names"
+              :componentId="componentId"
+              :schema="vertexSchema"
             />
           </template>
           <template v-if="coloring_style_key === edge_dict['value'] && hasColorMap('edge')">
@@ -164,7 +202,8 @@ watch(coloring_style_label, (value) => {
               v-model:range="edge_attribute_range"
               v-model:colorMap="edge_attribute_color_map"
               :id="id"
-              :schema="back_schemas.opengeodeweb_back.edge_attribute_names"
+              :componentId="componentId"
+              :schema="edgeSchema"
             />
           </template>
           <template v-if="coloring_style_key === cell_dict['value'] && hasColorMap('cell')">
@@ -173,7 +212,8 @@ watch(coloring_style_label, (value) => {
               v-model:range="cell_attribute_range"
               v-model:colorMap="cell_attribute_color_map"
               :id="id"
-              :schema="back_schemas.opengeodeweb_back.cell_attribute_names"
+              :componentId="componentId"
+              :schema="cellSchema"
             />
           </template>
           <template v-if="coloring_style_key === polygon_dict['value'] && hasColorMap('polygon')">
@@ -182,7 +222,8 @@ watch(coloring_style_label, (value) => {
               v-model:range="polygon_attribute_range"
               v-model:colorMap="polygon_attribute_color_map"
               :id="id"
-              :schema="back_schemas.opengeodeweb_back.polygon_attribute_names"
+              :componentId="componentId"
+              :schema="polygonSchema"
             />
           </template>
           <template
@@ -193,7 +234,8 @@ watch(coloring_style_label, (value) => {
               v-model:range="polyhedron_attribute_range"
               v-model:colorMap="polyhedron_attribute_color_map"
               :id="id"
-              :schema="back_schemas.opengeodeweb_back.polyhedron_attribute_names"
+              :componentId="componentId"
+              :schema="polyhedronSchema"
             />
           </template>
         </v-col>