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

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

@@ -0,0 +1,256 @@
+<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, blockId, targetBlockIds } = defineProps({
+  modelId: { type: String, required: true },
+  blockId: { type: String, default: undefined },
+  targetBlockIds: { type: Array, required: true },
+});
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+// Visibility
+const blocksVisibility = computed({
+  get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Block"),
+  set: async (newValue) => {
+    await dataStyleStore.setModelComponentTypeVisibility(modelId, "Block", newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const blockVisibility = computed({
+  get: () => dataStyleStore.modelBlockVisibility(modelId, blockId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksVisibility(modelId, [blockId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+// Color
+const blocksColor = computed({
+  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Block"),
+  set: async (color) => {
+    await dataStyleStore.setModelComponentTypeColor(modelId, "Block", color);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const blockColor = computed({
+  get: () => dataStyleStore.modelBlockColor(modelId, blockId),
+  set: async (color) => {
+    if (blockId) {
+      await dataStyleStore.setModelBlocksColor(modelId, [blockId], color);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
+const blocksColorMode = computed({
+  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId, "Block"),
+  set: async (colorMode) => {
+    await dataStyleStore.setModelComponentTypeColorMode(modelId, "Block", colorMode);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const blockColorMode = computed({
+  get: () => dataStyleStore.modelBlockColorMode(modelId, blockId),
+  set: async (colorMode) => {
+    if (blockId) {
+      await dataStyleStore.setModelBlockColorMode(modelId, blockId, colorMode);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
+// Group Attributes
+const blocksVertexAttributeName = computed({
+  get: () => dataStyleStore.modelBlocksVertexAttributeName(modelId, targetBlockIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksVertexAttributeName(modelId, targetBlockIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const blocksVertexAttributeRange = computed({
+  get: () => dataStyleStore.modelBlocksVertexAttributeRange(modelId, targetBlockIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksVertexAttributeRange(
+      modelId,
+      targetBlockIds,
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const blocksVertexAttributeColorMap = computed({
+  get: () => dataStyleStore.modelBlocksVertexAttributeColorMap(modelId, targetBlockIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksVertexAttributeColorMap(modelId, targetBlockIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const blocksPolyhedronAttributeName = computed({
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeName(modelId, targetBlockIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksPolyhedronAttributeName(modelId, targetBlockIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const blocksPolyhedronAttributeRange = computed({
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeRange(modelId, targetBlockIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksPolyhedronAttributeRange(
+      modelId,
+      targetBlockIds,
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const blocksPolyhedronAttributeColorMap = computed({
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeColorMap(modelId, targetBlockIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksPolyhedronAttributeColorMap(
+      modelId,
+      targetBlockIds,
+      newValue,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+// Individual Attributes
+const vertexAttributeName = computed({
+  get: () => dataStyleStore.modelBlocksVertexAttributeName(modelId, blockId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksVertexAttributeName(modelId, [blockId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeRange = computed({
+  get: () => dataStyleStore.modelBlocksVertexAttributeRange(modelId, blockId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksVertexAttributeRange(
+      modelId,
+      [blockId],
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeColorMap = computed({
+  get: () => dataStyleStore.modelBlocksVertexAttributeColorMap(modelId, blockId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksVertexAttributeColorMap(modelId, [blockId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const polyhedronAttributeName = computed({
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeName(modelId, blockId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksPolyhedronAttributeName(modelId, [blockId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const polyhedronAttributeRange = computed({
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeRange(modelId, blockId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksPolyhedronAttributeRange(
+      modelId,
+      [blockId],
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const polyhedronAttributeColorMap = computed({
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeColorMap(modelId, blockId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksPolyhedronAttributeColorMap(modelId, [blockId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const capabilities = {
+  color: { available: true },
+  textures: { available: false },
+  vertex: { available: true },
+  edge: { available: false },
+  cell: { available: false },
+  polygon: { available: false },
+  polyhedron: { available: true },
+};
+
+const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attribute_names;
+const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedron_attribute_names;
+</script>
+
+<template>
+  <div>
+    <OptionsSection title="Blocks Options" class="mt-6">
+      <VisibilitySwitch v-model="blocksVisibility" />
+      <v-row class="mt-2 pa-0">
+        <v-col class="pa-0">
+          <ViewerOptionsColoringTypeSelector
+            :id="modelId"
+            :componentId="targetBlockIds[0]"
+            v-model:coloring_style_key="blocksColorMode"
+            v-model:color="blocksColor"
+            v-model:vertex_attribute_name="blocksVertexAttributeName"
+            v-model:vertex_attribute_range="blocksVertexAttributeRange"
+            v-model:vertex_attribute_color_map="blocksVertexAttributeColorMap"
+            v-model:polyhedron_attribute_name="blocksPolyhedronAttributeName"
+            v-model:polyhedron_attribute_range="blocksPolyhedronAttributeRange"
+            v-model:polyhedron_attribute_color_map="blocksPolyhedronAttributeColorMap"
+            :capabilities="capabilities"
+            :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
+            :allowRandom="true"
+          />
+        </v-col>
+      </v-row>
+    </OptionsSection>
+
+    <OptionsSection v-if="blockId" title="Component Options" class="mt-6">
+      <VisibilitySwitch v-model="blockVisibility" />
+      <v-row class="mt-2 pa-0">
+        <v-col class="pa-0">
+          <ViewerOptionsColoringTypeSelector
+            :id="modelId"
+            :componentId="blockId"
+            v-model:coloring_style_key="blockColorMode"
+            v-model:color="blockColor"
+            v-model:vertex_attribute_name="vertexAttributeName"
+            v-model:vertex_attribute_range="vertexAttributeRange"
+            v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+            v-model:polyhedron_attribute_name="polyhedronAttributeName"
+            v-model:polyhedron_attribute_range="polyhedronAttributeRange"
+            v-model:polyhedron_attribute_color_map="polyhedronAttributeColorMap"
+            :capabilities="capabilities"
+            :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
+            :allowRandom="true"
+          />
+        </v-col>
+      </v-row>
+    </OptionsSection>
+  </div>
+</template>

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

@@ -0,0 +1,187 @@
+<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, cornerId, targetCornerIds } = defineProps({
+  modelId: { type: String, required: true },
+  cornerId: { type: String, default: undefined },
+  targetCornerIds: { type: Array, required: true },
+});
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+// Visibility
+const cornersVisibility = computed({
+  get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Corner"),
+  set: async (newValue) => {
+    await dataStyleStore.setModelComponentTypeVisibility(modelId, "Corner", newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const cornerVisibility = computed({
+  get: () => dataStyleStore.modelCornerVisibility(modelId, cornerId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVisibility(modelId, [cornerId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+// Color
+const cornersColor = computed({
+  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Corner"),
+  set: async (color) => {
+    await dataStyleStore.setModelComponentTypeColor(modelId, "Corner", color);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const cornerColor = computed({
+  get: () => dataStyleStore.modelCornerColor(modelId, cornerId),
+  set: async (color) => {
+    if (cornerId) {
+      await dataStyleStore.setModelCornersColor(modelId, [cornerId], color);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
+const cornersColorMode = computed({
+  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId, "Corner"),
+  set: async (colorMode) => {
+    await dataStyleStore.setModelComponentTypeColorMode(modelId, "Corner", colorMode);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const cornerColorMode = computed({
+  get: () => dataStyleStore.modelCornerColorMode(modelId, cornerId),
+  set: async (colorMode) => {
+    if (cornerId) {
+      await dataStyleStore.setModelCornerColorMode(modelId, cornerId, colorMode);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
+// Group Attributes
+const cornersVertexAttributeName = computed({
+  get: () => dataStyleStore.modelCornersVertexAttributeName(modelId, targetCornerIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeName(modelId, targetCornerIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const cornersVertexAttributeRange = computed({
+  get: () => dataStyleStore.modelCornersVertexAttributeRange(modelId, targetCornerIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeRange(
+      modelId,
+      targetCornerIds,
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const cornersVertexAttributeColorMap = computed({
+  get: () => dataStyleStore.modelCornersVertexAttributeColorMap(modelId, targetCornerIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeColorMap(modelId, targetCornerIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+// Individual Attributes
+const vertexAttributeName = computed({
+  get: () => dataStyleStore.modelCornersVertexAttributeName(modelId, cornerId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeName(modelId, [cornerId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeRange = computed({
+  get: () => dataStyleStore.modelCornersVertexAttributeRange(modelId, cornerId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeRange(
+      modelId,
+      [cornerId],
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeColorMap = computed({
+  get: () => dataStyleStore.modelCornersVertexAttributeColorMap(modelId, cornerId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeColorMap(modelId, [cornerId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const capabilities = {
+  color: { available: true },
+  textures: { available: false },
+  vertex: { available: true },
+  edge: { available: false },
+  cell: { available: false },
+  polygon: { available: false },
+  polyhedron: { available: false },
+};
+
+const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attribute_names;
+</script>
+
+<template>
+  <div>
+    <OptionsSection title="Corners Options" class="mt-6">
+      <VisibilitySwitch v-model="cornersVisibility" />
+      <v-row class="mt-2 pa-0">
+        <v-col class="pa-0">
+          <ViewerOptionsColoringTypeSelector
+            :id="modelId"
+            :componentId="targetCornerIds[0]"
+            v-model:coloring_style_key="cornersColorMode"
+            v-model:color="cornersColor"
+            v-model:vertex_attribute_name="cornersVertexAttributeName"
+            v-model:vertex_attribute_range="cornersVertexAttributeRange"
+            v-model:vertex_attribute_color_map="cornersVertexAttributeColorMap"
+            :capabilities="capabilities"
+            :schemas="{ vertex: vertexSchema }"
+            :allowRandom="true"
+          />
+        </v-col>
+      </v-row>
+    </OptionsSection>
+
+    <OptionsSection v-if="cornerId" title="Component Options" class="mt-6">
+      <VisibilitySwitch v-model="cornerVisibility" />
+      <v-row class="mt-2 pa-0">
+        <v-col class="pa-0">
+          <ViewerOptionsColoringTypeSelector
+            :id="modelId"
+            :componentId="cornerId"
+            v-model:coloring_style_key="cornerColorMode"
+            v-model:color="cornerColor"
+            v-model:vertex_attribute_name="vertexAttributeName"
+            v-model:vertex_attribute_range="vertexAttributeRange"
+            v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+            :capabilities="capabilities"
+            :schemas="{ vertex: vertexSchema }"
+            :allowRandom="true"
+          />
+        </v-col>
+      </v-row>
+    </OptionsSection>
+  </div>
+</template>

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

@@ -0,0 +1,252 @@
+<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, lineId, targetLineIds } = defineProps({
+  modelId: { type: String, required: true },
+  lineId: { type: String, default: undefined },
+  targetLineIds: { type: Array, required: true },
+});
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+// Visibility
+const linesVisibility = computed({
+  get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Line"),
+  set: async (newValue) => {
+    await dataStyleStore.setModelComponentTypeVisibility(modelId, "Line", newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const lineVisibility = computed({
+  get: () => dataStyleStore.modelLineVisibility(modelId, lineId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVisibility(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+// Color
+const linesColor = computed({
+  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Line"),
+  set: async (color) => {
+    await dataStyleStore.setModelComponentTypeColor(modelId, "Line", color);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const lineColor = computed({
+  get: () => dataStyleStore.modelLineColor(modelId, lineId),
+  set: async (color) => {
+    if (lineId) {
+      await dataStyleStore.setModelLinesColor(modelId, [lineId], color);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
+const linesColorMode = computed({
+  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId, "Line"),
+  set: async (colorMode) => {
+    await dataStyleStore.setModelComponentTypeColorMode(modelId, "Line", colorMode);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const lineColorMode = computed({
+  get: () => dataStyleStore.modelLineColorMode(modelId, lineId),
+  set: async (colorMode) => {
+    if (lineId) {
+      await dataStyleStore.setModelLineColorMode(modelId, lineId, colorMode);
+      hybridViewerStore.remoteRender();
+    }
+  },
+});
+
+// Group Attributes
+const linesVertexAttributeName = computed({
+  get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, targetLineIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVertexAttributeName(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesVertexAttributeRange = computed({
+  get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId, targetLineIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVertexAttributeRange(
+      modelId,
+      targetLineIds,
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesVertexAttributeColorMap = computed({
+  get: () => dataStyleStore.modelLinesVertexAttributeColorMap(modelId, targetLineIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVertexAttributeColorMap(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesEdgeAttributeName = computed({
+  get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, targetLineIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesEdgeAttributeName(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesEdgeAttributeRange = computed({
+  get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId, targetLineIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesEdgeAttributeRange(
+      modelId,
+      targetLineIds,
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const linesEdgeAttributeColorMap = computed({
+  get: () => dataStyleStore.modelLinesEdgeAttributeColorMap(modelId, targetLineIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesEdgeAttributeColorMap(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+// Individual Attributes
+const vertexAttributeName = computed({
+  get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, lineId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVertexAttributeName(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeRange = computed({
+  get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId, lineId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVertexAttributeRange(
+      modelId,
+      [lineId],
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const vertexAttributeColorMap = computed({
+  get: () => dataStyleStore.modelLinesVertexAttributeColorMap(modelId, lineId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVertexAttributeColorMap(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const edgeAttributeName = computed({
+  get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, lineId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesEdgeAttributeName(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const edgeAttributeRange = computed({
+  get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId, lineId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesEdgeAttributeRange(
+      modelId,
+      [lineId],
+      newValue[0],
+      newValue[1],
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const edgeAttributeColorMap = computed({
+  get: () => dataStyleStore.modelLinesEdgeAttributeColorMap(modelId, lineId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesEdgeAttributeColorMap(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
+const capabilities = {
+  color: { available: true },
+  textures: { available: false },
+  vertex: { available: true },
+  edge: { available: true },
+  cell: { available: false },
+  polygon: { available: false },
+  polyhedron: { available: false },
+};
+
+const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attribute_names;
+const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute_names;
+</script>
+
+<template>
+  <div>
+    <OptionsSection title="Lines Options" class="mt-6">
+      <VisibilitySwitch v-model="linesVisibility" />
+      <v-row class="mt-2 pa-0">
+        <v-col class="pa-0">
+          <ViewerOptionsColoringTypeSelector
+            :id="modelId"
+            :componentId="targetLineIds[0]"
+            v-model:coloring_style_key="linesColorMode"
+            v-model:color="linesColor"
+            v-model:vertex_attribute_name="linesVertexAttributeName"
+            v-model:vertex_attribute_range="linesVertexAttributeRange"
+            v-model:vertex_attribute_color_map="linesVertexAttributeColorMap"
+            v-model:edge_attribute_name="linesEdgeAttributeName"
+            v-model:edge_attribute_range="linesEdgeAttributeRange"
+            v-model:edge_attribute_color_map="linesEdgeAttributeColorMap"
+            :capabilities="capabilities"
+            :schemas="{ vertex: vertexSchema, edge: edgeSchema }"
+            :allowRandom="true"
+          />
+        </v-col>
+      </v-row>
+    </OptionsSection>
+
+    <OptionsSection v-if="lineId" title="Component Options" class="mt-6">
+      <VisibilitySwitch v-model="lineVisibility" />
+      <v-row class="mt-2 pa-0">
+        <v-col class="pa-0">
+          <ViewerOptionsColoringTypeSelector
+            :id="modelId"
+            :componentId="lineId"
+            v-model:coloring_style_key="lineColorMode"
+            v-model:color="lineColor"
+            v-model:vertex_attribute_name="vertexAttributeName"
+            v-model:vertex_attribute_range="vertexAttributeRange"
+            v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+            v-model:edge_attribute_name="edgeAttributeName"
+            v-model:edge_attribute_range="edgeAttributeRange"
+            v-model:edge_attribute_color_map="edgeAttributeColorMap"
+            :capabilities="capabilities"
+            :schemas="{ vertex: vertexSchema, edge: edgeSchema }"
+            :allowRandom="true"
+          />
+        </v-col>
+      </v-row>
+    </OptionsSection>
+  </div>
+</template>