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

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

@@ -1,37 +1,47 @@
 <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
-// This file exhaustively wires group- and per-component style properties (visibility/color/coloring/vertex+polyhedron attributes) to the style store; the formatter's line-wrapping of the resulting store calls pushes the file past max-lines even though no logic was added.
-// oxlint-disable eslint/max-lines
+import type { CollectionComponent } from "@ogw_front/stores/data_helpers/collections";
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 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";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 
 interface Props {
   modelId: string;
   lineId?: string;
   targetLineIds: string[];
+  collections?: CollectionComponent[];
 }
 
-const { modelId, lineId = undefined, targetLineIds } = defineProps<Props>();
+const {
+  modelId,
+  lineId = undefined,
+  targetLineIds,
+  collections = undefined,
+} = defineProps<Props>();
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
+const referenceLineId = computed<string | undefined>(() =>
+  collections ? targetLineIds[0] : undefined,
+);
+
 // Visibility
-const linesVisibility = computed({
-  get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Line"),
+const linesVisibility = computed<boolean>({
+  get: () =>
+    collections
+      ? targetLineIds.every((id) => dataStyleStore.modelLineVisibility(modelId, id))
+      : dataStyleStore.modelComponentTypeVisibility(modelId, "Line"),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesVisibility(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const lineVisibility = computed({
+const lineVisibility = computed<boolean | undefined>({
   get: () => dataStyleStore.modelLineVisibility(modelId, lineId) as boolean | undefined,
   set: async (newValue) => {
     if (lineId === undefined) {
@@ -44,7 +54,7 @@ const lineVisibility = computed({
 
 // Color
 const linesColor = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Line") as RGBAColor | undefined,
+  get: () => dataStyleStore.modelLineColor(modelId, referenceLineId.value) as RGBAColor | undefined,
   set: async (color) => {
     await dataStyleStore.setModelLinesColor(modelId, targetLineIds, color);
     hybridViewerStore.remoteRender();
@@ -64,12 +74,25 @@ const lineColor = computed<RGBAColor | undefined>({
 
 const linesActiveColoring = computed<string | undefined>({
   get: () =>
-    dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Line") as string | undefined,
+    dataStyleStore.modelLineActiveColoring(modelId, referenceLineId.value) as string | undefined,
   set: async (coloringType) => {
     if (typeof coloringType !== "string") {
       return;
     }
-    await dataStyleStore.setModelLinesActiveColoring(modelId, targetLineIds, coloringType);
+    if (collections && coloringType === "random") {
+      await Promise.all(
+        collections.map((collection) =>
+          dataStyleStore.setModelLinesActiveColoring(
+            modelId,
+            collection.children.map((child) => child.id),
+            coloringType,
+            collection.id,
+          ),
+        ),
+      );
+    } else {
+      await dataStyleStore.setModelLinesActiveColoring(modelId, targetLineIds, coloringType);
+    }
     hybridViewerStore.remoteRender();
   },
 });
@@ -86,8 +109,8 @@ const lineActiveColoring = computed<string | undefined>({
 });
 
 // Group Attributes
-const linesVertexAttributeName = computed({
-  get: () => dataStyleStore.modelLinesVertexAttributeName(modelId),
+const linesVertexAttributeName = computed<string | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, referenceLineId.value),
   set: async (newValue) => {
     if (newValue === undefined) {
       return;
@@ -97,16 +120,16 @@ const linesVertexAttributeName = computed({
   },
 });
 
-const linesVertexAttributeItem = computed({
-  get: () => dataStyleStore.modelLinesVertexAttributeItem(modelId),
+const linesVertexAttributeItem = computed<string | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeItem(modelId, referenceLineId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesVertexAttributeItem(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const linesVertexAttributeRange = computed({
-  get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId),
+const linesVertexAttributeRange = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId, referenceLineId.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
     if (minimum === undefined || maximum === undefined) {
@@ -122,8 +145,8 @@ const linesVertexAttributeRange = computed({
   },
 });
 
-const linesVertexAttributeColorMap = computed({
-  get: () => dataStyleStore.modelLinesVertexAttributeColorMap(modelId),
+const linesVertexAttributeColorMap = computed<RGBAColorMap | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeColorMap(modelId, referenceLineId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesVertexAttributeColorMap(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
@@ -131,15 +154,18 @@ const linesVertexAttributeColorMap = computed({
 });
 
 const linesVertexAttributeNoDataColor = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.modelLinesVertexAttributeNoDataColor(modelId) as RGBAColor | undefined,
+  get: () =>
+    dataStyleStore.modelLinesVertexAttributeNoDataColor(modelId, referenceLineId.value) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelLinesVertexAttributeNoDataColor(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const linesEdgeAttributeName = computed({
-  get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId),
+const linesEdgeAttributeName = computed<string | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, referenceLineId.value),
   set: async (newValue) => {
     if (newValue === undefined) {
       return;
@@ -149,16 +175,16 @@ const linesEdgeAttributeName = computed({
   },
 });
 
-const linesEdgeAttributeItem = computed({
-  get: () => dataStyleStore.modelLinesEdgeAttributeItem(modelId),
+const linesEdgeAttributeItem = computed<string | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeItem(modelId, referenceLineId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesEdgeAttributeItem(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const linesEdgeAttributeRange = computed({
-  get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId),
+const linesEdgeAttributeRange = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId, referenceLineId.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
     if (minimum === undefined || maximum === undefined) {
@@ -169,8 +195,8 @@ const linesEdgeAttributeRange = computed({
   },
 });
 
-const linesEdgeAttributeColorMap = computed({
-  get: () => dataStyleStore.modelLinesEdgeAttributeColorMap(modelId),
+const linesEdgeAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeColorMap(modelId, referenceLineId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesEdgeAttributeColorMap(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
@@ -178,7 +204,10 @@ const linesEdgeAttributeColorMap = computed({
 });
 
 const linesEdgeAttributeNoDataColor = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.modelLinesEdgeAttributeNoDataColor(modelId) as RGBAColor | undefined,
+  get: () =>
+    dataStyleStore.modelLinesEdgeAttributeNoDataColor(modelId, referenceLineId.value) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelLinesEdgeAttributeNoDataColor(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
@@ -186,7 +215,7 @@ const linesEdgeAttributeNoDataColor = computed<RGBAColor | undefined>({
 });
 
 // Individual Attributes
-const vertexAttributeName = computed({
+const vertexAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, lineId),
   set: async (newValue) => {
     if (lineId === undefined || newValue === undefined) {
@@ -197,7 +226,7 @@ const vertexAttributeName = computed({
   },
 });
 
-const vertexAttributeItem = computed({
+const vertexAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelLinesVertexAttributeItem(modelId, lineId),
   set: async (newValue) => {
     if (lineId === undefined) {
@@ -208,7 +237,7 @@ const vertexAttributeItem = computed({
   },
 });
 
-const vertexAttributeRange = computed({
+const vertexAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId, lineId),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
@@ -220,7 +249,7 @@ const vertexAttributeRange = computed({
   },
 });
 
-const vertexAttributeColorMap = computed({
+const vertexAttributeColorMap = computed<ColorMap | undefined>({
   get: () => dataStyleStore.modelLinesVertexAttributeColorMap(modelId, lineId),
   set: async (newValue) => {
     if (lineId === undefined) {
@@ -243,7 +272,7 @@ const vertexAttributeNoDataColor = computed<RGBAColor | undefined>({
   },
 });
 
-const edgeAttributeName = computed({
+const edgeAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, lineId),
   set: async (newValue) => {
     if (lineId === undefined || newValue === undefined) {
@@ -254,7 +283,7 @@ const edgeAttributeName = computed({
   },
 });
 
-const edgeAttributeItem = computed({
+const edgeAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelLinesEdgeAttributeItem(modelId, lineId),
   set: async (newValue) => {
     if (lineId === undefined) {
@@ -265,7 +294,7 @@ const edgeAttributeItem = computed({
   },
 });
 
-const edgeAttributeRange = computed({
+const edgeAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId, lineId),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
@@ -277,7 +306,7 @@ const edgeAttributeRange = computed({
   },
 });
 
-const edgeAttributeColorMap = computed({
+const edgeAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.modelLinesEdgeAttributeColorMap(modelId, lineId),
   set: async (newValue) => {
     if (lineId === undefined) {

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

@@ -1,26 +1,25 @@
 <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 BlocksOptions from "./BlocksOptions.vue";
+import type { CollectionComponent } from "@ogw_front/stores/data_helpers/collections";
+import CornersOptions from "./CornersOptions.vue";
+import LinesOptions from "./LinesOptions.vue";
+import { MESH_COMPONENT_TYPES } from "@ogw_front/utils/default_styles";
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import SurfacesOptions from "./SurfacesOptions.vue";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
-
-import BlocksOptions from "./BlocksOptions.vue";
-import CornersOptions from "./CornersOptions.vue";
-import LinesOptions from "./LinesOptions.vue";
-import SurfacesOptions from "./SurfacesOptions.vue";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const dataStore = useDataStore();
 const treeviewStore = useTreeviewStore();
 
-function getBatchComponentIds(currentId: string) {
+function getBatchComponentIds(currentId: string): string[] {
   const { activeItems } = treeviewStore;
   if (activeItems.includes(currentId) && activeItems.length > 1) {
     return activeItems;
@@ -29,15 +28,18 @@ function getBatchComponentIds(currentId: string) {
 }
 
 interface Props {
-  itemProps: Record<string, any>;
+  itemProps: Record<string, unknown>;
 }
 
 const { itemProps } = defineProps<Props>();
 
-const modelId = computed(() => itemProps.meta_data.modelId || itemProps.id);
-const componentId = computed(() => itemProps.meta_data.pickedComponentId);
-const selection = computed(() => dataStyleStore.visibleMeshComponents(modelId.value).value || []);
+const modelId = computed<string>(() => itemProps.meta_data.modelId || itemProps.id);
+const componentId = computed<string | undefined>(() => itemProps.meta_data.pickedComponentId);
+const selection = computed<string[]>(
+  () => dataStyleStore.visibleMeshComponents(modelId.value).value || [],
+);
 const componentType = ref<string | undefined>(undefined);
+const collections = ref<CollectionComponent[] | undefined>(undefined);
 
 watch(
   () => [
@@ -48,8 +50,18 @@ watch(
   ],
   async () => {
     componentType.value = undefined;
+    collections.value = undefined;
     if (itemProps.meta_data.viewer_type === "model_component_type") {
-      componentType.value = itemProps.meta_data.modelComponentType;
+      const { modelComponentType, targetComponentIds: ids } = itemProps.meta_data;
+      if (MESH_COMPONENT_TYPES.includes(modelComponentType)) {
+        componentType.value = modelComponentType;
+      } else {
+        const collectionsByType = await dataStore.fetchAllCollectionComponents(modelId.value);
+        collections.value = collectionsByType[modelComponentType].filter((collection) =>
+          collection.children.every((child) => ids.includes(child.id)),
+        );
+        componentType.value = collections.value[0].children[0].category;
+      }
     } else if (componentId.value && modelId.value) {
       const currentModelId = modelId.value;
       const currentCompId = componentId.value;
@@ -87,7 +99,7 @@ watch(
   { immediate: true },
 );
 
-const modelVisibility = computed({
+const modelVisibility = computed<boolean | undefined>({
   get: () => dataStyleStore.modelVisibility(modelId.value),
   set: async (newValue) => {
     if (newValue === undefined) {
@@ -156,24 +168,28 @@ const modelComponentsActiveColoring = computed<string | undefined>({
       :modelId="modelId"
       :blockId="componentId"
       :targetBlockIds="targetComponentIds"
+      :collections="collections"
     />
     <SurfacesOptions
       v-else-if="componentType === 'Surface'"
       :modelId="modelId"
       :surfaceId="componentId"
       :targetSurfaceIds="targetComponentIds"
+      :collections="collections"
     />
     <LinesOptions
       v-else-if="componentType === 'Line'"
       :modelId="modelId"
       :lineId="componentId"
       :targetLineIds="targetComponentIds"
+      :collections="collections"
     />
     <CornersOptions
       v-else-if="componentType === 'Corner'"
       :modelId="modelId"
       :cornerId="componentId"
       :targetCornerIds="targetComponentIds"
+      :collections="collections"
     />
   </v-sheet>
 </template>

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

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import ModelColor from "@ogw_front/assets/viewer_svgs/model_component_color.svg";
-import ModelStyleCard from "./ModelStyleCard.vue";
-// 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 ModelColor from "@ogw_front/assets/viewer_svgs/model_component_color.svg";
+import ModelStyleCard from "./ModelStyleCard.vue";
 
 interface Props {
   itemProps: ItemProps & { index: number };

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

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import SurfacePoints from "@ogw_front/assets/viewer_svgs/surface_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 SurfacePoints from "@ogw_front/assets/viewer_svgs/surface_points.svg";
 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";
@@ -21,9 +19,11 @@ interface Props {
 
 const { itemProps } = defineProps<Props>();
 
-const id = computed(() => (itemProps.meta_data.modelId as string | undefined) || itemProps.id);
+const id = computed<string>(
+  () => (itemProps.meta_data.modelId as string | undefined) || itemProps.id,
+);
 
-const visibility = computed({
+const visibility = computed<boolean>({
   get: () => dataStyleStore.modelPointsVisibility(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>
@@ -32,7 +32,7 @@ const visibility = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const size = computed({
+const size = computed<number>({
   get: () => dataStyleStore.modelPointsSize(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>