@geode/opengeodeweb-front 10.34.0-rc.8 → 10.34.0

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-// oxlint-disable id-length
+// oxlint-disable id-length since vuetify require { r,g,b} format to work
+import { formatColorString, parseColorString } from "@ogw_front/utils/color_picker";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import { useCopyToClipboard } from "@ogw_front/composables/copy_to_clipboard";
 
 interface Props {
   disabledAlpha?: boolean;
@@ -8,12 +10,15 @@ interface Props {
 
 const { disabledAlpha = false } = defineProps<Props>();
 
-// The useMousePressed composable only needs the underlying DOM element (it unwraps a component ref's $el at runtime); typing this as the actual Vuetify component instance produces a union too complex for TS to represent.
-const colorPickerRef = useTemplateRef<HTMLElement>("colorPickerRef");
+const colorPickerWrapperRef = useTemplateRef<HTMLElement>("colorPickerWrapperRef");
+const { pressed } = useMousePressed({ target: colorPickerWrapperRef });
+
 const model = defineModel<RGBAColor>();
-const { pressed } = useMousePressed({ target: colorPickerRef });
+const { copy, copied } = useCopyToClipboard();
+
+const currentMode = ref(disabledAlpha ? "rgb" : "rgba");
+const colorInputText = ref("");
 
-// The model is always bound by every current caller (ColoringTypeSelector.vue, AttributeSelector.vue); defineModel can't express that as a required prop without breaking its optional v-model contract, so this reads it as defined here.
 const initialColor = model.value as RGBAColor;
 const vuetifyColor = ref({
   r: initialColor.red,
@@ -22,69 +27,246 @@ const vuetifyColor = ref({
   a: initialColor.alpha,
 });
 
+function updateInputTextFromColor(red: number, green: number, blue: number, alpha: number): void {
+  colorInputText.value =
+    disabledAlpha || currentMode.value === "rgb"
+      ? `${red}, ${green}, ${blue}`
+      : `${red}, ${green}, ${blue}, ${alpha}`;
+}
+
+interface VuetifyColor {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+function commitColorToModel(): void {
+  const { r: red, g: green, b: blue, a: alpha } = vuetifyColor.value;
+  model.value = { red, green, blue, alpha };
+}
+
+function onPickerUpdate(color: VuetifyColor): void {
+  const red = Math.round(color.r);
+  const green = Math.round(color.g);
+  const blue = Math.round(color.b);
+  const alpha = disabledAlpha ? 1 : Number(color.a.toFixed(2));
+
+  vuetifyColor.value = { r: red, g: green, b: blue, a: alpha };
+  updateInputTextFromColor(red, green, blue, alpha);
+  if (!pressed.value) {
+    commitColorToModel();
+  }
+}
+
+function toggleMode(): void {
+  if (disabledAlpha) {
+    return;
+  }
+  currentMode.value = currentMode.value === "rgba" ? "rgb" : "rgba";
+  const { r: red, g: green, b: blue, a: alpha } = vuetifyColor.value;
+  updateInputTextFromColor(red, green, blue, alpha);
+}
+
+async function copyToClipboard(): Promise<void> {
+  const { r: red, g: green, b: blue, a: alpha } = vuetifyColor.value;
+  await copy(formatColorString({ red, green, blue, alpha }, currentMode.value));
+}
+
+function parseAndApplyText(text: string): boolean {
+  const parsed = parseColorString(text);
+  if (!parsed) {
+    return false;
+  }
+
+  const { red, green, blue, alpha: rawAlpha } = parsed;
+  const alpha = disabledAlpha ? 1 : rawAlpha;
+
+  if (!disabledAlpha && alpha < 1) {
+    currentMode.value = "rgba";
+  }
+
+  vuetifyColor.value = { r: red, g: green, b: blue, a: alpha };
+  model.value = { red, green, blue, alpha };
+  updateInputTextFromColor(red, green, blue, alpha);
+  return true;
+}
+
+function onInputPaste(event: ClipboardEvent): void {
+  event.preventDefault();
+  const text = event.clipboardData?.getData("text/plain") ?? "";
+  parseAndApplyText(text);
+}
+
+function onInputCommit(): void {
+  if (!parseAndApplyText(colorInputText.value)) {
+    const { r: red, g: green, b: blue, a: alpha } = vuetifyColor.value;
+    updateInputTextFromColor(red, green, blue, alpha);
+  }
+}
+
 watch(
   model,
   (newValue) => {
     if (!newValue) {
       return;
     }
-    const hasChanged =
-      newValue.red !== vuetifyColor.value.r ||
-      newValue.green !== vuetifyColor.value.g ||
-      newValue.blue !== vuetifyColor.value.b ||
-      newValue.alpha !== vuetifyColor.value.a;
-    if (!hasChanged) {
-      return;
+    const { red, green, blue, alpha } = newValue;
+    if (
+      vuetifyColor.value.r !== red ||
+      vuetifyColor.value.g !== green ||
+      vuetifyColor.value.b !== blue ||
+      vuetifyColor.value.a !== alpha
+    ) {
+      vuetifyColor.value = { r: red, g: green, b: blue, a: alpha };
     }
-    vuetifyColor.value = {
-      r: newValue.red,
-      g: newValue.green,
-      b: newValue.blue,
-      a: newValue.alpha,
-    };
+    updateInputTextFromColor(red, green, blue, alpha);
   },
-  { deep: true },
+  { deep: true, immediate: true },
 );
 
-watch(pressed, (value) => {
-  if (!value) {
-    model.value = {
-      red: vuetifyColor.value.r,
-      green: vuetifyColor.value.g,
-      blue: vuetifyColor.value.b,
-      alpha: vuetifyColor.value.a,
-    };
+watch(pressed, (isPressed) => {
+  if (!isPressed) {
+    commitColorToModel();
   }
 });
+
+watch(
+  () => disabledAlpha,
+  (disabled) => {
+    if (disabled) {
+      currentMode.value = "rgb";
+      if (model.value) {
+        model.value = { ...model.value, alpha: 1 };
+      }
+    }
+  },
+);
 </script>
 
 <template>
-  <v-color-picker
-    ref="colorPickerRef"
-    data-testid="colorPicker"
-    v-model="vuetifyColor"
-    flat
-    canvas-height="75"
-    hide-inputs
-    hide-eye-dropper
-    :disabled-alpha="disabledAlpha"
-    width="220"
-    :mode="disabledAlpha ? 'rgb' : 'rgba'"
-    class="mx-auto"
-  />
+  <div
+    ref="colorPickerWrapperRef"
+    class="color-picker-wrapper mx-auto rounded-lg overflow-hidden border"
+  >
+    <v-color-picker
+      data-testid="colorPicker"
+      :model-value="vuetifyColor"
+      @update:model-value="onPickerUpdate"
+      mode="rgba"
+      flat
+      canvas-height="75"
+      hide-eye-dropper
+      hide-inputs
+      :disabled-alpha="disabledAlpha"
+      width="220"
+      class="mx-auto bg-transparent"
+    />
+
+    <div class="color-picker-controls pa-2 pt-0">
+      <div class="d-flex align-center justify-space-between px-1 mb-1">
+        <div class="d-flex align-center ga-1">
+          <span
+            class="text-caption font-weight-medium text-uppercase text-medium-emphasis"
+            style="font-size: 0.68rem"
+          >
+            {{ currentMode }}
+          </span>
+          <v-btn
+            v-if="!disabledAlpha"
+            icon
+            density="compact"
+            variant="text"
+            size="small"
+            @click="toggleMode"
+            v-tooltip="'Swap mode (RGB / RGBA)'"
+          >
+            <v-icon icon="mdi-swap-horizontal" size="16" />
+          </v-btn>
+        </div>
+
+        <v-btn
+          data-testid="copyColorBtn"
+          icon
+          density="compact"
+          variant="text"
+          size="small"
+          @click="copyToClipboard"
+          v-tooltip="'Copy to clipboard'"
+        >
+          <v-icon
+            :icon="copied ? 'mdi-check' : 'mdi-content-copy'"
+            size="14"
+            :color="copied ? 'success' : undefined"
+          />
+        </v-btn>
+      </div>
+
+      <input
+        data-testid="colorInput"
+        v-model="colorInputText"
+        class="color-input-field"
+        type="text"
+        spellcheck="false"
+        autocomplete="off"
+        @paste="onInputPaste"
+        @change="onInputCommit"
+        @keydown.enter.prevent="onInputCommit"
+      />
+    </div>
+  </div>
 </template>
 
 <style scoped>
+.color-picker-wrapper {
+  width: 220px;
+  background-color: rgba(33, 33, 33, 0.95);
+  border: 1px solid rgba(255, 255, 255, 0.12) !important;
+  outline: none;
+}
+
+:deep(.v-color-picker) {
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+:deep(.v-color-picker-canvas),
+:deep(.v-color-picker__preview),
+:deep(.v-color-picker__controls) {
+  box-shadow: none !important;
+}
+
 :deep(.v-color-picker__controls) {
-  padding: 8px !important;
+  padding: 4px 8px 0 !important;
 }
 
 :deep(.v-color-picker__dot) {
   width: 18px !important;
   height: 18px !important;
+  box-shadow: none !important;
 }
 
 :deep(.v-color-picker__preview) {
   margin-bottom: 0 !important;
 }
+
+.color-input-field {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  background-color: rgba(255, 255, 255, 0.08);
+  border: 1px solid transparent;
+  border-radius: 6px;
+  outline: none;
+  color: inherit;
+  font-size: 0.82rem;
+  font-family: monospace;
+  letter-spacing: 0.5px;
+  text-align: center;
+  transition: border-color 0.15s ease;
+}
+
+.color-input-field:focus {
+  border-color: rgba(255, 255, 255, 0.3);
+}
 </style>

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

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
+import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsAttributeSelector from "@ogw_front/components/Viewer/Options/AttributeSelector.vue";
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
 import ViewerOptionsTexturesSelector from "@ogw_front/components/Viewer/Options/TexturesSelector.vue";
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
-import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 
 interface Texture {
   id: string;
@@ -88,37 +86,39 @@ const polygonSchema = schemas.polygon || back_schemas.opengeodeweb_back.polygon_
 const polyhedronSchema =
   schemas.polyhedron || back_schemas.opengeodeweb_back.polyhedron_attribute_names;
 
-function isAvailable(key: string) {
+function isAvailable(key: string): boolean {
   if (capabilities[key] && capabilities[key].available === false) {
     return false;
   }
   return true;
 }
 
-function hasColorMap(key: string) {
+function hasColorMap(key: string): boolean {
   if (capabilities[key] && capabilities[key].hasColorMap === false) {
     return false;
   }
   return true;
 }
 
-const has_color = computed(() => color.value !== undefined && isAvailable("color"));
-const has_textures = computed(() => textures.value !== undefined && isAvailable("textures"));
-const has_vertex = computed(
+const has_color = computed<boolean>(() => color.value !== undefined && isAvailable("color"));
+const has_textures = computed<boolean>(
+  () => textures.value !== undefined && isAvailable("textures"),
+);
+const has_vertex = computed<boolean>(
   () =>
     vertex_attribute_range.value !== undefined && isAvailable("vertex") && hasColorMap("vertex"),
 );
-const has_edge = computed(
+const has_edge = computed<boolean>(
   () => edge_attribute_range.value !== undefined && isAvailable("edge") && hasColorMap("edge"),
 );
-const has_cells = computed(
+const has_cells = computed<boolean>(
   () => cell_attribute_range.value !== undefined && isAvailable("cell") && hasColorMap("cell"),
 );
-const has_polygons = computed(
+const has_polygons = computed<boolean>(
   () =>
     polygon_attribute_range.value !== undefined && isAvailable("polygon") && hasColorMap("polygon"),
 );
-const has_polyhedra = computed(
+const has_polyhedra = computed<boolean>(
   () =>
     polyhedron_attribute_range.value !== undefined &&
     isAvailable("polyhedron") &&
@@ -136,7 +136,7 @@ const polyhedron_dict = {
   name: "Polyhedron attribute",
   value: "polyhedron",
 };
-const coloring_styles = computed(() => {
+const coloring_styles = computed<{ labels: string[]; values: string[] }>(() => {
   const array = [];
   if (has_color.value) {
     array.push(color_dict);
@@ -169,9 +169,9 @@ const coloring_styles = computed(() => {
   return { labels, values };
 });
 
-const coloring_style_label = ref("");
+const coloring_style_label = ref<string>("");
 
-const active_key = computed(() => {
+const active_key = computed<string | undefined>(() => {
   const index = coloring_styles.value.labels.indexOf(coloring_style_label.value);
   return index === -1 ? coloring_style_key.value : coloring_styles.value.values[index];
 });

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

@@ -15,27 +15,29 @@ const { dataId = undefined, x, y } = defineProps<Props>();
 
 const show = defineModel<boolean>("show", { default: false });
 
-const dataIdRef = computed(() => dataId);
+const dataIdRef = computed<string>(() => dataId);
 const { currentColormap, currentRange, applyGlobalColormap, resetGlobalRange } =
   useGlobalAttributeStyle(dataIdRef);
 
-const minimum = computed({
+const minimum = computed<number>({
   get: () => currentRange.value[0],
   set: (val) => {
     currentRange.value = [val, currentRange.value[1]];
   },
 });
 
-const maximum = computed({
+const maximum = computed<number>({
   get: () => currentRange.value[1],
   set: (val) => {
     currentRange.value = [currentRange.value[0], val];
   },
 });
 
-const quickColormapPresets = computed(() => getPresetsWithCurrentAtTop(currentColormap.value));
+const quickColormapPresets = computed<{ Name: string }[]>(() =>
+  getPresetsWithCurrentAtTop(currentColormap.value),
+);
 
-async function onQuickColormapSelect(preset: { Name: string }) {
+async function onQuickColormapSelect(preset: { Name: string }): Promise<void> {
   await applyGlobalColormap(preset.Name);
 }
 </script>

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

@@ -5,7 +5,7 @@ interface Props {
 
 const { title } = defineProps<Props>();
 
-const isCollapsed = ref(false);
+const isCollapsed = ref<boolean>(false);
 </script>
 
 <template>

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

@@ -6,9 +6,11 @@ import { useBackStore } from "@ogw_front/stores/back";
 // Mirrors FileUploader's own (unexported) UploadFile type.
 type UploadFile = File & { isConfigured?: boolean; displayName?: string };
 
-const emit = defineEmits<{
+interface Emits {
   update_value: [payload: { key: "texture_name" | "id"; value: string }];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
 interface Props {
   id: string;
@@ -18,8 +20,8 @@ interface Props {
 
 const { id, textureId: propTextureId, textureName: propTextureName } = defineProps<Props>();
 
-const textureName = ref(propTextureName);
-const textureId = ref(propTextureId);
+const textureName = ref<string>(propTextureName);
+const textureId = ref<string>(propTextureId);
 
 watch(
   () => propTextureName,
@@ -38,7 +40,7 @@ watch(
 const textureCoordinates = ref<string[]>([]);
 const backStore = useBackStore();
 
-function getTextureCoordinates() {
+function getTextureCoordinates(): void {
   const schema = back_schemas.opengeodeweb_back.texture_coordinates;
   const params = { id };
   backStore.request(
@@ -57,7 +59,7 @@ onMounted(() => {
   getTextureCoordinates();
 });
 
-async function files_uploaded_event(value: UploadFile[]) {
+async function files_uploaded_event(value: UploadFile[]): Promise<void> {
   if (value.length > 0 && value[0]) {
     const schema = back_schemas.opengeodeweb_back.save_viewable_file;
     const params = {

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

@@ -24,7 +24,7 @@ onMounted(() => {
   }
 });
 
-function update_value_event($event: { key: keyof Texture; value: string }, index: number) {
+function update_value_event($event: { key: keyof Texture; value: string }, index: number): void {
   const texture = internal_textures.value[index];
   if (!texture) {
     return;

package/app/components/Viewer/OverlappingObjectsPicker.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
 import GlassCard from "@ogw_front/components/GlassCard.vue";
 import { formatListId } from "@ogw_front/utils/name_cleaner";
 import { geode_objects } from "@ogw_front/assets/geode_objects";
 
-// Mirrors the use_overlapping_picker composable's (unexported) ProposedItem type.
 interface IntermediateItem {
   id: string;
-  viewer_id: number;
+  viewer_id: number | undefined;
   name: string;
   viewer_type: string | undefined;
   geode_object_type: string | undefined;
@@ -17,21 +14,23 @@ interface IntermediateItem {
 interface Props {
   displayIntermediate: boolean;
   intermediateItems: IntermediateItem[];
-  menuStyle: Record<string, any>;
+  menuStyle: Record<string, unknown>;
 }
 
 const { displayIntermediate, intermediateItems, menuStyle } = defineProps<Props>();
 
-const emit = defineEmits<{
+interface Emits {
   select: [item: IntermediateItem];
   "update:displayIntermediate": [val: boolean];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
-function selectItem(item: IntermediateItem) {
+function selectItem(item: IntermediateItem): void {
   emit("select", item);
 }
 
-function handleUpdate(val: boolean) {
+function handleUpdate(val: boolean): void {
   emit("update:displayIntermediate", val);
 }
 </script>

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

@@ -1,19 +1,15 @@
 <script setup lang="ts">
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
-import PointSetPoints from "@ogw_front/assets/viewer_svgs/point_set_points.svg";
-// oxlint-disable import/consistent-type-specifier-style -- combining the default import with the type import avoids a duplicate-imports violation on this same module; using disable-next-line here is fragile because a formatter can re-wrap the import onto multiple lines and shift the flagged line
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import PointSetPoints from "@ogw_front/assets/viewer_svgs/point_set_points.svg";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-
 import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();

package/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
-import SolidPolyhedra from "@ogw_front/assets/viewer_svgs/solid_polyhedra.svg";
-// oxlint-disable import/consistent-type-specifier-style -- combining the default import with the type import avoids a duplicate-imports violation on this same module; using disable-next-line here is fragile because a formatter can re-wrap the import onto multiple lines and shift the flagged line
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import SolidPolyhedra from "@ogw_front/assets/viewer_svgs/solid_polyhedra.svg";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-
 import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
@@ -27,7 +23,7 @@ const { itemProps, tooltip = "Polyhedra options" } = defineProps<Props>();
 
 const id = toRef(() => itemProps.id);
 
-const visibility = computed({
+const visibility = computed<boolean>({
   get: () => dataStyleStore.meshPolyhedraVisibility(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>
@@ -36,7 +32,7 @@ const visibility = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const coloring_style_key = computed({
+const coloring_style_key = computed<string>({
   get: () => dataStyleStore.meshPolyhedraActiveColoring(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>
@@ -54,7 +50,7 @@ const color = computed<RGBAColor | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_name = computed({
+const vertex_attribute_name = computed<string | undefined>({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
   set: async (newValue) => {
     if (newValue === undefined) {
@@ -66,7 +62,7 @@ const vertex_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_item = computed({
+const vertex_attribute_item = computed<string | undefined>({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeItem(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>
@@ -75,7 +71,7 @@ const vertex_attribute_item = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
@@ -90,7 +86,7 @@ const vertex_attribute_range = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_color_map = computed({
+const vertex_attribute_color_map = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeColorMap(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>
@@ -109,7 +105,7 @@ const vertex_attribute_no_data_color = computed<RGBAColor | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_name = computed({
+const polyhedron_attribute_name = computed<string | undefined>({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
   set: async (newValue) => {
     if (newValue === undefined) {
@@ -121,7 +117,7 @@ const polyhedron_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_item = computed({
+const polyhedron_attribute_item = computed<string | undefined>({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeItem(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>
@@ -130,7 +126,7 @@ const polyhedron_attribute_item = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_range = computed({
+const polyhedron_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
@@ -145,7 +141,7 @@ const polyhedron_attribute_range = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_color_map = computed({
+const polyhedron_attribute_color_map = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>