Update how datacollection components sync styles

packages/core/src/data_sources/utils.ts

@@ -4,10 +4,11 @@ import { DataCollectionStateMap } from './model/data_collection/types';
 import { DataCollectionItemType } from './model/data_collection/constants';
 import { DataConditionType, DataCondition } from './model/conditional_variables/DataCondition';
 import DataVariable, { DataVariableProps, DataVariableType } from './model/DataVariable';
-import Component from '../dom_components/model/Component';
 import { ComponentDefinition, ComponentOptions } from '../dom_components/model/types';
 import { serialize } from '../utils/mixins';
 import { DataConditionIfFalseType, DataConditionIfTrueType } from './model/conditional_variables/constants';
+import { getSymbolMain } from '../dom_components/model/SymbolUtils';
+import Component from '../dom_components/model/Component';
 
 export function isDataResolverProps(value: any): value is DataResolverProps {
   return typeof value === 'object' && [DataVariableType, DataConditionType].includes(value?.type);
@@ -90,3 +91,33 @@ export function enumToArray(enumObj: any) {
     .filter((key) => isNaN(Number(key)))
     .map((key) => enumObj[key]);
 }
+
+function shouldSyncCollectionSymbol(component: Component): boolean {
+  const componentCollectionMap = component.collectionsStateMap;
+  if (!componentCollectionMap) return false;
+
+  const parentCollectionIds = Object.keys(componentCollectionMap);
+  if (!parentCollectionIds.length) return false;
+
+  const mainSymbolComponent = getSymbolMain(component);
+
+  if (!mainSymbolComponent || mainSymbolComponent === component) return false;
+
+  const mainSymbolCollectionMap = mainSymbolComponent.collectionsStateMap;
+  const mainSymbolParentIds = Object.keys(mainSymbolCollectionMap);
+
+  const isSubsetOfOriginalCollections = mainSymbolParentIds.every((id) => parentCollectionIds.includes(id));
+
+  return isSubsetOfOriginalCollections;
+}
+
+function getIdFromCollectionSymbol(component: Component): string {
+  const mainSymbolComponent = getSymbolMain(component);
+  return mainSymbolComponent ? mainSymbolComponent.getId() : '';
+}
+
+export function checkAndGetSyncableCollectionItemId(component: Component) {
+  const shouldSync = shouldSyncCollectionSymbol(component);
+  const itemId = shouldSync ? getIdFromCollectionSymbol(component) : null;
+  return { shouldSync, itemId };
+}

packages/core/src/dom_components/model/Component.ts

@@ -55,6 +55,7 @@ import {
 import { ComponentDataResolverWatchers } from './ComponentDataResolverWatchers';
 import { DynamicWatchersOptions } from './ComponentResolverWatcher';
 import { DataCollectionStateMap } from '../../data_sources/model/data_collection/types';
+import { checkAndGetSyncableCollectionItemId } from '../../data_sources/utils';
 
 export interface IComponent extends ExtractMethods<Component> {}
 export interface SetAttrOptions extends SetOptions, UpdateStyleOptions, DynamicWatchersOptions {}
@@ -383,7 +384,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
 
   stopSyncComponentCollectionState() {
     this.stopListening(this.components(), 'add remove reset', this.syncOnComponentChange);
-    this.onCollectionsStateMapUpdate({});
+    this.collectionsStateMap = {};
     this.components().forEach((cmp) => cmp.stopSyncComponentCollectionState());
   }
 
@@ -1724,6 +1725,10 @@ export default class Component extends StyleableModel<ComponentProperties> {
    */
   getId(): string {
     let attrs = this.get('attributes') || {};
+    const { shouldSync, itemId } = checkAndGetSyncableCollectionItemId(this);
+    if (shouldSync) {
+      attrs.id = itemId;
+    }
     return attrs.id || this.ccid || this.cid;
   }