CIM Symbol doesn't update text color via CIMPrimitiveOverride

[Jonas1]

I am defining a cimsymbol in the function with primitiveOverrides to update the style at runtime. This works fine for all border and background color, but for some reason it doesn't update the text color when i override the primitive (line 67). Am i missing something here? Thanks in advance 

//https://esri.github.io/cim-symbol-builder-js/
export function getCIMSymbolData() {
  return {
    type: 'CIMSymbolReference',
    primitiveOverrides: [
      {
        type: 'CIMPrimitiveOverride',
        primitiveName: 'locationIndex',
        propertyName: 'TextString',
        valueExpressionInfo: {
          type: 'CIMExpressionInfo',
          expression: '$feature.text',
          returnType: 'Default',
        },
      },
      {
        type: 'CIMPrimitiveOverride',
        primitiveName: 'markerBackgroundColor',
        propertyName: 'Color',
        valueExpressionInfo: {
          type: 'CIMExpressionInfo',
          expression: '$feature.markerBackgroundColor',
          returnType: 'Default',
        },
      },
      {
        type: 'CIMPrimitiveOverride',
        primitiveName: 'markerTextAndBorderColor',
        propertyName: 'Color',
        valueExpressionInfo: {
          type: 'CIMExpressionInfo',
          expression: '$feature.markerTextAndBorderColor',
          returnType: 'Default',
        },
      },
    ],
    symbol: {
      type: 'CIMPointSymbol',
      symbolLayers: [
        {
          type: 'CIMVectorMarker',
          enable: true,
          size: 32,
          anchorPointUnits: 'Relative',
          frame: {
            xmin: -5,
            ymin: -5,
            xmax: 5,
            ymax: 5,
          },
          markerGraphics: [
            {
              type: 'CIMMarkerGraphic',
              primitiveName: 'locationIndex',
              geometry: {
                x: 0,
                y: 0,
              },
              symbol: {
                type: 'CIMTextSymbol',
                height: 4,
                horizontalAlignment: 'Center',
                offsetX: 0,
                offsetY: 5.5,
                symbol: {
                  type: 'CIMPolygonSymbol',
                  //todo find out why the text color is not getting overwritten
                  symbolLayers: [
                    {
                      type: 'CIMSolidFill',
                      primitiveName: 'markerTextAndBorderColor',
                      enable: true,
                      color: [0, 0, 0, 255],
                      //color: [255, 255, 255, 255],
                    },
                  ],
                },
                verticalAlignment: 'Center',
              },
              textString: '',
            },
          ],
          scaleSymbolsProportionally: true,
          respectFrame: true,
          anchorPoint: {
            x: 0,
            y: 0,
          },
          offsetY: 8,
        },
        {
          type: 'CIMVectorMarker',
          enable: true,
          anchorPoint: {
            x: 0,
            y: -0.5,
          },
          anchorPointUnits: 'Relative',
          dominantSizeAxis3D: 'Y',
          size: 40,
          billboardMode3D: 'FaceNearPlane',
          frame: {
            xmin: 0,
            ymin: 0,
            xmax: 21,
            ymax: 21,
          },
          scaleSymbolsProportionally: true,
          respectFrame: true,
          markerGraphics: [
            {
              type: 'CIMMarkerGraphic',
              geometry: {
                rings: [
                  [
                    [17.17, 14.33],
                    [16.97, 12.96],
                    [16.38, 11.37],
                    [12.16, 3.98],
                    [11.2, 1.94],
                    [10.5, 0],
                    [9.8, 1.96],
                    [8.84, 4.02],
                    [4.61, 11.41],
                    [4.02, 12.98],
                    [3.83, 14.33],
                    [3.96, 15.63],
                    [4.34, 16.88],
                    [4.95, 18.03],
                    [5.78, 19.04],
                    [6.8, 19.88],
                    [7.95, 20.49],
                    [9.2, 20.87],
                    [10.5, 21],
                    [11.8, 20.87],
                    [13.05, 20.5],
                    [14.2, 19.88],
                    [15.22, 19.05],
                    [16.05, 18.03],
                    [16.66, 16.88],
                    [17.04, 15.63],
                    [17.17, 14.33],
                  ],
                ],
              },
              symbol: {
                type: 'CIMPolygonSymbol',
                symbolLayers: [
                  {
                    type: 'CIMSolidStroke',
                    primitiveName: 'markerTextAndBorderColor',
                    enable: true,
                    capStyle: 'Round',
                    joinStyle: 'Round',
                    lineStyle3D: 'Strip',
                    miterLimit: 10,
                    width: 0.5,
                    color: 'black',
                  },
                  {
                    type: 'CIMSolidFill',
                    primitiveName: 'markerBackgroundColor',
                    enable: true,
                    color: '#c1dba3',
                  },
                ],
              },
            },
          ],
        },
      ],
    },
  };
}

[AnneFitz]

I believe we've fixed this bug for the upcoming release (version 4.31) coming soon! Can you try out the /next development version of the API and let me know if this fixes your issue? 

<script src="https://js.arcgis.com/next/"></script>  

[Jonas1]

The issue still persists using the 4.31 or 4.32.0-next.20241111 version. If you need more information about how i am using it please let me know. This is the FeatureLayer that uses the cimsymbol:

new FeatureLayer({
          id: id,
          objectIdField: 'featureId',
          fields: [
            { name: 'graphicId', type: 'string' },
            { name: 'featureName', type: 'string' },
            { name: 'text', type: 'integer' },
            { name: 'markerBackgroundColor', type: 'string' },
            { name: 'markerTextAndBorderColor', type: 'string' },
          ],
          outFields: ['*'],
          title: id,
          source: graphicList,
          renderer: {
            type: 'simple',
            symbol: {
              type: 'cim',
              data: getCIMSymbolData(),
            },
          } as __esri.RendererProperties,
          geometryType: 'point',
          spatialReference: {
            wkid: 102100,
          },
        }),

[AnneFitz]

Hi, sorry for the delayed response! Could you provide some more information on how the color attribute is stored in your layer? Is it a hex value or string rgb value? 

[Jonas1]

Hey, we tried both using the rgb array and also using hex, but since it was working fine using hex for the border our logic should be working fine.

this.hitTestFeatureLayer().applyEdits({
        updateFeatures: graphics.map((graphic) => {
          if (graphic.attributes['graphicId'] === customerLocationUuid) {
            graphic.attributes['markerBackgroundColor'] = '#558817';
            graphic.attributes['markerTextAndBorderColor'] = [255, 255, 255, 1]; //'#ffffff'
          } else {
            graphic.attributes['markerBackgroundColor'] = '#c1dba3';
            graphic.attributes['markerTextAndBorderColor'] = '#000000';
          }
          return graphic;
        }),
      });

[AnneFitz]

Yes, hex values should work! I just tried out your symbol with a client-side feature layer and the overrides appear to be working as expected. 

https://codepen.io/annefitz/pen/wBwKgpM?editors=1000

Let me know if you see something different and these overrides are not working for you! Otherwise, I think there may be an issue elsewhere in your code and it might be worth reaching out to tech support for help.

[Jonas1]

Oh i am sorry, i forgot to mention that setting it initially works, but our case is updating the overwrite after the graphic has been created, which works fine for the border, but not for the text.

[AnneFitz · Accepted solution]

Oh thanks for the clarification! Just tested this out though by performing a hitTest & applyEdits when the feature is clicked and both the background, text, and border colors all seem to be updating as expected. Here's my example (click on a feature to update the attributes & watch it change color): https://codepen.io/annefitz/pen/OPLyxRw

[Jonas1]

Thanks for the demo. I guess there is something wierd happening in our application then, will try to find the problem.

[Jonas1]

I found that it is working in 2D and CIMPolygonSymbol is not supported yet in 3D. And also for some reason it only doesn't work for the text, but we are using the CIMPolygonSymbol for the background color also and that works...