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

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/HybridRenderingView.vue

@@ -1,7 +1,12 @@
 <script setup>
+import ColormapQuickPicker from "@ogw_front/components/Viewer/Options/ColormapQuickPicker.vue";
 import HybridViewerTooltip from "@ogw_front/components/HybridViewerTooltip";
 import ViewToolbar from "@ogw_front/components/ViewToolbar";
+
+import { useDataStore } from "@ogw_front/stores/data";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useMenuStore } from "@ogw_front/stores/menu";
+import { useQuickColormap } from "@ogw_front/composables/use_quick_colormap";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const DEFAULT_ELEMENT_HEIGHT = 100;
@@ -11,6 +16,8 @@ const emit = defineEmits(["click"]);
 const container = useTemplateRef("viewer");
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
+const menuStore = useMenuStore();
+const dataStore = useDataStore();
 
 const { width: elementWidth, height: elementHeight } = useElementSize(container);
 const { width: windowWidth, height: windowHeight } = useWindowSize();
@@ -32,6 +39,8 @@ onMounted(async () => {
   }
 });
 
+const { pickColormap, quickColormap } = useQuickColormap();
+
 function debounce(func, wait) {
   let timeout = undefined;
   return function executedFunction(...args) {
@@ -45,6 +54,7 @@ function debounce(func, wait) {
 }
 
 async function handleClick(event) {
+  const { offsetX, offsetY, clientX, clientY } = event;
   if (viewerStore.picking_mode) {
     const rect = container.value.$el.getBoundingClientRect();
     const x = event.clientX - rect.left;
@@ -52,6 +62,12 @@ async function handleClick(event) {
     await viewerStore.set_picked_point(x, y);
     return;
   }
+
+  const picked = await pickColormap(offsetX, offsetY, clientX, clientY);
+  if (picked) {
+    return;
+  }
+
   emit("click", event);
 }
 </script>
@@ -59,6 +75,12 @@ async function handleClick(event) {
 <template>
   <ClientOnly>
     <div data-testid="hybridViewer" class="fill-height" style="position: relative; height: 100%">
+      <ColormapQuickPicker
+        v-model:show="quickColormap.show"
+        :x="quickColormap.x"
+        :y="quickColormap.y"
+        :data-id="quickColormap.data_id"
+      />
       <ViewToolbar />
       <slot name="ui"></slot>
       <HybridViewerTooltip :container-width="elementWidth" :container-height="elementHeight" />
@@ -67,7 +89,7 @@ async function handleClick(event) {
         ref="viewer"
         :class="{ 'picking-cursor': viewerStore.picking_mode }"
         style="height: 100%; overflow: hidden; position: relative; z-index: 0"
-        @click="handleClick"
+        @pointerup.capture="handleClick"
       />
     </div>
   </ClientOnly>

package/app/components/RemoteRenderingView.vue

@@ -1,8 +1,14 @@
 <script setup>
 import { useElementSize, useWindowSize } from "@vueuse/core";
+
 import { Status } from "@ogw_front/utils/status";
-import ViewToolbar from "@ogw_front/components/ViewToolbar";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useMenuStore } from "@ogw_front/stores/menu";
+import { useQuickColormap } from "@ogw_front/composables/use_quick_colormap";
 import { useViewerStore } from "@ogw_front/stores/viewer";
+
+import ColormapQuickPicker from "@ogw_front/components/Viewer/Options/ColormapQuickPicker.vue";
+import ViewToolbar from "@ogw_front/components/ViewToolbar";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import vtkRemoteView from "@kitware/vtk.js/Rendering/Misc/RemoteView";
 
@@ -11,18 +17,24 @@ const { viewId } = defineProps({
 });
 
 const viewerStore = useViewerStore();
+const menuStore = useMenuStore();
+const dataStore = useDataStore();
 const viewer = useTemplateRef("viewer");
 const { width, height } = useElementSize(viewer);
 
 const { width: windowWidth, height: windowHeight } = useWindowSize();
 
-function get_x_y(event) {
-  if (viewerStore.picking_mode.value === true) {
-    const { offsetX, offsetY } = event;
+const { pickColormap, quickColormap } = useQuickColormap();
+
+async function get_x_y(event) {
+  const { offsetX, offsetY, clientX, clientY } = event;
+  if (viewerStore.picking_mode === true) {
     viewerStore.set_picked_point(offsetX, offsetY);
     const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
     const params = { x: offsetX, y: offsetY };
     viewerStore.request({ schema, params });
+  } else {
+    await pickColormap(offsetX, offsetY, clientX, clientY);
   }
 }
 
@@ -101,13 +113,19 @@ onMounted(async () => {
 <template>
   <ClientOnly>
     <div style="position: relative; width: 100%; height: 100%">
+      <ColormapQuickPicker
+        v-model:show="quickColormap.show"
+        :x="quickColormap.x"
+        :y="quickColormap.y"
+        :data-id="quickColormap.data_id"
+      />
       <ViewToolbar />
       <slot name="ui"></slot>
       <v-col
         ref="viewer"
         style="overflow: hidden; position: relative; z-index: 0; height: 100%; width: 100%"
         class="pa-0"
-        @click="get_x_y"
+        @pointerup.capture="get_x_y"
         @keydown.esc="viewerStore.toggle_picking_mode(false)"
       />
     </div>

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>