@geode/opengeodeweb-front 10.23.0-rc.3 → 10.23.0-rc.5

package/app/components/Basic/Slider.vue

@@ -3,5 +3,5 @@ const model = defineModel();
 </script>
 
 <template>
-  <v-slider v-model="model" hide-details min="0" max="20" step="2" />
+  <v-slider v-model="model" hide-details min="0" max="20" step="2" density="compact" />
 </template>

package/app/components/Basic/Switch.vue

@@ -3,5 +3,13 @@ const model = defineModel();
 </script>
 
 <template>
-  <v-switch v-model="model" inset hide-details />
+  <v-switch v-model="model" inset hide-details density="compact" class="compact-switch" />
 </template>
+
+<style scoped>
+.compact-switch {
+  transform: scale(0.75);
+  transform-origin: left center;
+  width: 40px;
+}
+</style>

package/app/components/Viewer/ContextMenu/ContextMenuItem.vue

@@ -5,7 +5,7 @@ import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTheme } from "vuetify";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-const CARD_WIDTH = 320;
+const CARD_WIDTH = 300;
 const CARD_HEIGHT = 500;
 const MARGIN = 60;
 const RADIUS = 80;
@@ -170,8 +170,10 @@ function toggleOptions() {
         class="elevation-24"
         style="overflow: hidden; display: flex; flex-direction: column"
       >
-        <v-card-title>{{ tooltip }}</v-card-title>
-        <v-card-text class="pa-5" style="overflow-y: auto; flex: 1; min-height: 0">
+        <v-card-title class="text-subtitle-1 pt-3 pb-0 px-3 font-weight-bold">{{
+          tooltip
+        }}</v-card-title>
+        <v-card-text class="px-3 pb-3 pt-1" style="overflow-y: auto; flex: 1; min-height: 0">
           <slot name="options" />
         </v-card-text>
       </GlassCard>
@@ -252,4 +254,40 @@ function toggleOptions() {
 .options-left {
   right: 60px;
 }
+
+:deep(.v-field) {
+  min-height: 30px !important;
+  height: 30px !important;
+  border-radius: 6px !important;
+}
+
+:deep(.v-field__input) {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 30px !important;
+  height: 30px !important;
+  font-size: 0.95rem !important;
+  align-items: center;
+}
+
+:deep(.v-field__append-inner) {
+  align-items: center;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  height: 30px !important;
+}
+
+:deep(.v-field__append-inner .v-icon) {
+  font-size: 16px !important;
+}
+
+:deep(.v-field-label) {
+  font-size: 0.75rem !important;
+  top: 6px !important;
+}
+
+:deep(.v-field-label--floating) {
+  top: -8px !important;
+  font-size: 0.7rem !important;
+}
 </style>

package/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -119,25 +119,19 @@ const edge_attribute_color_map = computed({
     <template #options>
       <ViewerOptionsVisibilitySwitch data-testid="meshEdgesVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <ViewerOptionsWidthSlider v-model="width" />
-        </v-row>
-        <v-row>
-          <v-col>
-            <ViewerOptionsColoringTypeSelector
-              :id="id"
-              v-model:coloring_style_key="coloring_style_key"
-              v-model:color="color"
-              v-model:vertex_attribute_name="vertex_attribute_name"
-              v-model:vertex_attribute_range="vertex_attribute_range"
-              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-              v-model:edge_attribute_name="edge_attribute_name"
-              v-model:edge_attribute_range="edge_attribute_range"
-              v-model:edge_attribute_color_map="edge_attribute_color_map"
-            />
-          </v-col>
-        </v-row>
+        <v-divider class="my-2" />
+        <ViewerOptionsWidthSlider v-model="width" />
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:edge_attribute_name="edge_attribute_name"
+          v-model:edge_attribute_range="edge_attribute_range"
+          v-model:edge_attribute_color_map="edge_attribute_color_map"
+        />
       </template>
     </template>
   </ViewerContextMenuItem>

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

@@ -68,19 +68,13 @@ const color = computed({
     <template #options>
       <ViewerOptionsVisibilitySwitch data-testid="meshEdgesVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <ViewerOptionsWidthSlider data-testid="meshEdgesWidthSlider" v-model="size" />
-        </v-row>
-        <v-row>
-          <v-col>
-            <ViewerOptionsColoringTypeSelector
-              :id="id"
-              v-model:coloring_style_key="coloring_style_key"
-              v-model:color="color"
-            />
-          </v-col>
-        </v-row>
+        <v-divider class="my-2" />
+        <ViewerOptionsWidthSlider data-testid="meshEdgesWidthSlider" v-model="size" />
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+        />
       </template>
     </template>
   </ViewerContextMenuItem>

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

@@ -98,23 +98,17 @@ const vertex_attribute_color_map = computed({
         v-model="visibility"
       />
       <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <ViewerOptionsSizeSlider data-testid="meshPointsSizeSlider" v-model="size" />
-        </v-row>
-        <v-row>
-          <v-col>
-            <ViewerOptionsColoringTypeSelector
-              :id="id"
-              v-model:coloring_style_key="coloring_style_key"
-              v-model:color="color"
-              v-model:vertex_attribute_name="vertex_attribute_name"
-              v-model:vertex_attribute_range="vertex_attribute_range"
-              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-              :capabilities="{ vertex: { available: false } }"
-            />
-          </v-col>
-        </v-row>
+        <v-divider class="my-2" />
+        <ViewerOptionsSizeSlider data-testid="meshPointsSizeSlider" v-model="size" />
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          :capabilities="{ vertex: { available: false } }"
+        />
       </template>
     </template>
   </ViewerContextMenuItem>

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

@@ -206,51 +206,41 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
 </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>
+  <OptionsSection title="Blocks Options" class="mt-4">
+    <VisibilitySwitch v-model="blocksVisibility" />
+    <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"
+    />
+  </OptionsSection>
+
+  <OptionsSection v-if="blockId" title="Component Options" class="mt-4">
+    <VisibilitySwitch v-model="blockVisibility" />
+    <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"
+    />
+  </OptionsSection>
 </template>

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

@@ -143,45 +143,35 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
 </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>
+  <OptionsSection title="Corners Options" class="mt-4">
+    <VisibilitySwitch v-model="cornersVisibility" />
+    <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"
+    />
+  </OptionsSection>
+
+  <OptionsSection v-if="cornerId" title="Component Options" class="mt-4">
+    <VisibilitySwitch v-model="cornerVisibility" />
+    <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"
+    />
+  </OptionsSection>
 </template>

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

@@ -202,51 +202,41 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
 </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>
+  <OptionsSection title="Lines Options" class="mt-4">
+    <VisibilitySwitch v-model="linesVisibility" />
+    <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"
+    />
+  </OptionsSection>
+
+  <OptionsSection v-if="lineId" title="Component Options" class="mt-4">
+    <VisibilitySwitch v-model="lineVisibility" />
+    <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"
+    />
+  </OptionsSection>
 </template>

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

@@ -132,7 +132,7 @@ watch(modelComponentsColorMode, async (colorMode) => {
       <VisibilitySwitch v-model="modelVisibility" />
     </OptionsSection>
 
-    <OptionsSection v-if="!componentType && !componentId" title="Components Options" class="mt-6">
+    <OptionsSection v-if="!componentType && !componentId" title="Components Options" class="mt-4">
       <v-label class="text-caption mb-1 mt-2">Color Mode</v-label>
       <v-select
         v-model="modelComponentsColorMode"
@@ -178,7 +178,43 @@ watch(modelComponentsColorMode, async (colorMode) => {
 
 <style scoped>
 .model-style-card {
-  padding-top: 20px;
+  padding-top: 12px;
   overflow-x: hidden;
 }
+
+:deep(.v-field) {
+  min-height: 30px !important;
+  height: 30px !important;
+  border-radius: 6px !important;
+}
+
+:deep(.v-field__input) {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 30px !important;
+  height: 30px !important;
+  font-size: 0.95rem !important;
+  align-items: center;
+}
+
+:deep(.v-field__append-inner) {
+  align-items: center;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  height: 30px !important;
+}
+
+:deep(.v-field__append-inner .v-icon) {
+  font-size: 16px !important;
+}
+
+:deep(.v-field-label) {
+  font-size: 0.75rem !important;
+  top: 6px !important;
+}
+
+:deep(.v-field-label--floating) {
+  top: -8px !important;
+  font-size: 0.7rem !important;
+}
 </style>

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

@@ -51,10 +51,8 @@ const size = computed({
         v-model="visibility"
       />
       <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <ViewerOptionsSizeSlider data-testid="modelPointsSizeSlider" v-model="size" />
-        </v-row>
+        <v-divider class="my-2" />
+        <ViewerOptionsSizeSlider data-testid="modelPointsSizeSlider" v-model="size" />
       </template>
     </template>
   </ViewerContextMenuItem>

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

@@ -210,51 +210,41 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
 </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>
+  <OptionsSection title="Surfaces Options" class="mt-4">
+    <VisibilitySwitch v-model="surfacesVisibility" />
+    <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"
+    />
+  </OptionsSection>
+
+  <OptionsSection v-if="surfaceId" title="Component Options" class="mt-4">
+    <VisibilitySwitch v-model="surfaceVisibility" />
+    <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"
+    />
+  </OptionsSection>
 </template>

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

@@ -11,8 +11,8 @@ const colorMap = defineModel("colorMap", { type: String });
 <template>
   <div class="attribute-colorbar mt-3">
     <ColorMapPicker v-model:selected-preset-name="colorMap" :min="minimum" :max="maximum" />
-    <v-row dense align="center" class="mt-2">
-      <v-col cols="5">
+    <v-row dense align="center" class="mt-2" no-gutters>
+      <v-col cols="5" class="pe-1">
         <v-text-field
           :model-value="minimum"
           @update:model-value="(value) => (minimum = Number(value))"
@@ -33,7 +33,7 @@ const colorMap = defineModel("colorMap", { type: String });
           v-tooltip="'Reset range'"
         />
       </v-col>
-      <v-col cols="5">
+      <v-col cols="5" class="ps-1">
         <v-text-field
           :model-value="maximum"
           @update:model-value="(value) => (maximum = Number(value))"

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

@@ -109,6 +109,7 @@ watch(name, (newName, oldName) => {
     item-value="attribute_name"
     density="compact"
     label="Select an attribute"
+    hide-details
   />
   <ViewerOptionsAttributeColorBar
     v-if="name"

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

@@ -41,9 +41,25 @@ watch(pressed, (value) => {
     ref="colorPickerRef"
     v-model="vuetifyColor"
     flat
-    canvas-height="100"
+    canvas-height="75"
     hide-inputs
-    width="100%"
+    width="220"
     mode="rgba"
+    class="mx-auto"
   />
 </template>
+
+<style scoped>
+:deep(.v-color-picker__controls) {
+  padding: 8px !important;
+}
+
+:deep(.v-color-picker__dot) {
+  width: 18px !important;
+  height: 18px !important;
+}
+
+:deep(.v-color-picker__preview) {
+  margin-bottom: 0 !important;
+}
+</style>

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

@@ -161,85 +161,79 @@ watch(
 );
 </script>
 <template>
-  <v-row justify="center" align="center">
-    <v-divider />
+  <v-divider class="my-2 mx-2" />
+  <v-row justify="center" align="center" no-gutters class="px-2">
+    <v-col cols="auto" class="mr-2">
+      <v-icon size="18" icon="mdi-format-color-fill" v-tooltip:left="'Coloring'" />
+    </v-col>
     <v-col>
-      <v-row justify="center" align="center">
-        <v-col cols="auto">
-          <v-icon size="30" icon="mdi-format-color-fill" v-tooltip:left="'Coloring'" />
-        </v-col>
-        <v-col>
-          <v-select
-            v-model="coloring_style_label"
-            :items="coloring_styles.labels"
-            label="Select a coloring style"
-            density="compact"
-          />
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-spacer />
-        <v-col cols="10">
-          <template v-if="coloring_style_key === color_dict['value']">
-            <ViewerOptionsColorPicker v-model="color" />
-          </template>
-          <template v-if="coloring_style_key === textures_dict['value']">
-            <ViewerOptionsTexturesSelector v-model="textures" :id="id" />
-          </template>
-          <template v-if="coloring_style_key === vertex_dict['value'] && hasColorMap('vertex')">
-            <ViewerOptionsAttributeSelector
-              v-model:name="vertex_attribute_name"
-              v-model:range="vertex_attribute_range"
-              v-model:colorMap="vertex_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="vertexSchema"
-            />
-          </template>
-          <template v-if="coloring_style_key === edge_dict['value'] && hasColorMap('edge')">
-            <ViewerOptionsAttributeSelector
-              v-model:name="edge_attribute_name"
-              v-model:range="edge_attribute_range"
-              v-model:colorMap="edge_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="edgeSchema"
-            />
-          </template>
-          <template v-if="coloring_style_key === cell_dict['value'] && hasColorMap('cell')">
-            <ViewerOptionsAttributeSelector
-              v-model:name="cell_attribute_name"
-              v-model:range="cell_attribute_range"
-              v-model:colorMap="cell_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="cellSchema"
-            />
-          </template>
-          <template v-if="coloring_style_key === polygon_dict['value'] && hasColorMap('polygon')">
-            <ViewerOptionsAttributeSelector
-              v-model:name="polygon_attribute_name"
-              v-model:range="polygon_attribute_range"
-              v-model:colorMap="polygon_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="polygonSchema"
-            />
-          </template>
-          <template
-            v-if="coloring_style_key === polyhedron_dict['value'] && hasColorMap('polyhedron')"
-          >
-            <ViewerOptionsAttributeSelector
-              v-model:name="polyhedron_attribute_name"
-              v-model:range="polyhedron_attribute_range"
-              v-model:colorMap="polyhedron_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="polyhedronSchema"
-            />
-          </template>
-        </v-col>
-      </v-row>
+      <v-select
+        v-model="coloring_style_label"
+        :items="coloring_styles.labels"
+        label="Select a coloring style"
+        density="compact"
+        hide-details
+      />
+    </v-col>
+  </v-row>
+  <v-row class="mt-3 px-2" no-gutters>
+    <v-col cols="12" class="ps-7 pe-1">
+      <template v-if="coloring_style_key === color_dict['value']">
+        <ViewerOptionsColorPicker v-model="color" />
+      </template>
+      <template v-if="coloring_style_key === textures_dict['value']">
+        <ViewerOptionsTexturesSelector v-model="textures" :id="id" />
+      </template>
+      <template v-if="coloring_style_key === vertex_dict['value'] && hasColorMap('vertex')">
+        <ViewerOptionsAttributeSelector
+          v-model:name="vertex_attribute_name"
+          v-model:range="vertex_attribute_range"
+          v-model:colorMap="vertex_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="vertexSchema"
+        />
+      </template>
+      <template v-if="coloring_style_key === edge_dict['value'] && hasColorMap('edge')">
+        <ViewerOptionsAttributeSelector
+          v-model:name="edge_attribute_name"
+          v-model:range="edge_attribute_range"
+          v-model:colorMap="edge_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="edgeSchema"
+        />
+      </template>
+      <template v-if="coloring_style_key === cell_dict['value'] && hasColorMap('cell')">
+        <ViewerOptionsAttributeSelector
+          v-model:name="cell_attribute_name"
+          v-model:range="cell_attribute_range"
+          v-model:colorMap="cell_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="cellSchema"
+        />
+      </template>
+      <template v-if="coloring_style_key === polygon_dict['value'] && hasColorMap('polygon')">
+        <ViewerOptionsAttributeSelector
+          v-model:name="polygon_attribute_name"
+          v-model:range="polygon_attribute_range"
+          v-model:colorMap="polygon_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="polygonSchema"
+        />
+      </template>
+      <template v-if="coloring_style_key === polyhedron_dict['value'] && hasColorMap('polyhedron')">
+        <ViewerOptionsAttributeSelector
+          v-model:name="polyhedron_attribute_name"
+          v-model:range="polyhedron_attribute_range"
+          v-model:colorMap="polyhedron_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="polyhedronSchema"
+        />
+      </template>
     </v-col>
   </v-row>
 </template>

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

@@ -14,7 +14,7 @@ const isCollapsed = ref(false);
         mdi-chevron-down
       </v-icon>
     </div>
-    <v-container v-show="!isCollapsed" class="pa-2">
+    <v-container v-show="!isCollapsed" class="pa-0">
       <slot />
     </v-container>
   </div>
@@ -24,18 +24,18 @@ const isCollapsed = ref(false);
 .options-section {
   position: relative;
   border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 12px;
-  padding: 12px 8px 8px 8px;
+  border-radius: 8px;
+  padding: 8px 4px 6px 4px;
 }
 
 .section-badge {
   position: absolute;
-  top: -12px;
-  left: 16px;
+  top: -10px;
+  left: 12px;
   background-color: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(8px);
-  padding: 2px 12px;
-  font-size: 0.7rem;
+  padding: 1px 8px;
+  font-size: 0.65rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;

package/app/components/Viewer/Options/Sliders/Slider.vue

@@ -8,10 +8,12 @@ const { tooltip } = defineProps({
 </script>
 
 <template>
-  <v-col cols="auto" justify="center">
-    <v-icon size="30" icon="mdi-ruler" v-tooltip:left="tooltip" />
-  </v-col>
-  <v-col justify="center">
-    <BasicSlider v-model="model" />
-  </v-col>
+  <v-row align="center" no-gutters class="px-2">
+    <v-col cols="auto" class="mr-2">
+      <v-icon size="18" icon="mdi-ruler" v-tooltip:left="tooltip" />
+    </v-col>
+    <v-col>
+      <BasicSlider v-model="model" />
+    </v-col>
+  </v-row>
 </template>

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

@@ -71,12 +71,13 @@ watch(texture_id, (value) => {
 </style>
 
 <template>
-  <v-col cols="7" class="pa-1 ml-3">
+  <v-col cols="8" class="pa-1">
     <v-select
       v-model="texture_name"
       :items="texture_coordinates"
       label="Select a texture"
       density="compact"
+      hide-details
     />
   </v-col>
   <v-badge

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

@@ -5,11 +5,11 @@ const visibility = defineModel();
 </script>
 
 <template>
-  <v-row class="pa-0" align="center">
-    <v-col cols="auto" justify="center">
-      <v-icon size="30" icon="mdi-eye" v-tooltip:left="'Visibility'" />
+  <v-row class="pa-0 px-2" align="center" no-gutters>
+    <v-col cols="auto" class="mr-2">
+      <v-icon size="18" icon="mdi-eye" v-tooltip:left="'Visibility'" />
     </v-col>
-    <v-col cols="auto" justify="center">
+    <v-col cols="auto">
       <BasicSwitch v-model="visibility" />
     </v-col>
   </v-row>

package/app/components/Viewer/PointSet/SpecificPointsOptions.vue

@@ -95,28 +95,17 @@ const vertex_attribute_color_map = computed({
         v-model="visibility"
       />
       <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <v-col cols="auto" justify="center">
-            <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Size'" />
-          </v-col>
-          <v-col justify="center">
-            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <ViewerOptionsColoringTypeSelector
-              :id="id"
-              v-model:coloring_style_key="coloring_style_key"
-              v-model:color="color"
-              v-model:vertex_attribute_name="vertex_attribute_name"
-              v-model:vertex_attribute_range="vertex_attribute_range"
-              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-              :vertex_has_colormap="true"
-            />
-          </v-col>
-        </v-row>
+        <v-divider class="my-2" />
+        <ViewerOptionsSizeSlider v-model="size" />
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          :vertex_has_colormap="true"
+        />
       </template>
     </template>
   </ViewerContextMenuItem>

package/internal/stores/hybrid_viewer.js

@@ -105,7 +105,7 @@ function performHoverHighlight(event, options) {
     return;
   }
   const rect = container.getBoundingClientRect();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
   const params = {
     x: Math.round(event.clientX - rect.left),
     y: Math.round(rect.height - (event.clientY - rect.top)),
@@ -125,7 +125,7 @@ function performHoverHighlight(event, options) {
 
 function performClearHoverHighlight(options) {
   const { viewerStore, viewer_schemas, hover_highlight_field_type, hybridDb } = options;
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.clear_highlight;
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
   const params = {
     x: -1,
     y: -1,

package/package.json

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