AnalysisStyle on multiple Decorators turns black

[g3rezz]

AnalysisStyle on multiple Decorators turns black

Description

I am new to the iTwin Platform and React. I started with the code in the Scientific Visualization Sample and encountered problems with multiple decorators. When visualizing more than one decorator, only the last decorator in the array has the correct AnalysisStyle, and the others turn black or show inaccurate visuals (Image 1, 2).

The data in the JSON file follows the predefined structure. According to the console, the AnalysisStyle contains the correct scalars and is applied to the correct decorator instance. Taking the decorator instance with IModelApp.viewManager.decorators[decoratorIndex] also did not help.

I am using an iTwin with an iModel not the sandbox.

How should I handle React state when assigning multiple AnalysisStyles? Alternatively, if there are known issues or best practices regarding the behavior of AnalysisStyle in this scenario, any insight would be greatly appreciated.

Expected

I expected all decorators to have the correct AnalysisStyle visualization (Image 3).

Images

Image 1 - Current Result polyfaces.slice(0, 4)

Image 2 - polyfaces.slice(1, 3)

Image 3 - Expected polyfaces.slice(0, 4)

Code

ScientificVizWidget.tsx

//...
  const initializeDecorator = useCallback(async () => {
    if (!viewport) return;

    if (ScientificVizDecorator.decorator) {
      ScientificVizApi.setAnalysisStyle(viewport, undefined);
      ScientificVizDecorator.decorator.dispose();
    }

    let polyfaces = await ScientificVizApi.createAllBuildings();

    for (const polyface of polyfaces) {
      ScientificVizDecorator.decorator = new ScientificVizDecorator(
        viewport,
        polyface
      );

      const thematicChannelNames = [
        ...getChannelsByType(polyface, AuxChannelDataType.Scalar).map(
          (c) => c.name!
        ),
      ];

      let defaultThematicChannel: string = "Lden";
      setThematicChannelData({
        currentChannelName: defaultThematicChannel,
        channelNames: thematicChannelNames,
      });
    }
  }, [viewport]);
//...

useEffect(() => {
    if (!viewport || !ScientificVizDecorator.decorator) {
      return;
    }

    const polyface = ScientificVizDecorator.decorator.polyface;
    const thematicChannel = polyface.data.auxData?.channels.find(
      (c) => thematicChannelData.currentChannelName === c.name
    );

    if (!thematicChannel) return;

    const mapScalarToColor = (scalarValue: number): ColorDef => {
      const colorRanges: [number, ColorDef][] = [
       // Color definition
      ];

      for (const [threshold, color] of colorRanges) {
        if (scalarValue > threshold) {
          return color;
        }
      }

      return ColorDef.from(183, 206, 142); // Default color as ColorDef
    };

    let minScalar = Number.MAX_VALUE;
    let maxScalar = Number.MIN_VALUE;

    const mappings: Gradient.KeyColorProps[][] = [];

    for (const dataElement of thematicChannel.data) {
      const minValue = Math.min(...dataElement.values);
      const maxValue = Math.max(...dataElement.values);
      minScalar = Math.min(minScalar, minValue);
      maxScalar = Math.max(maxScalar, maxValue);
      const mapping: Gradient.KeyColorProps[] = new Array(256)
        .fill(0)
        .map((_, i) => {
          const normalizedValue = i / 255;
          const scalarValue =
            minScalar + normalizedValue * (maxScalar - minScalar);
          const colorDef = mapScalarToColor(scalarValue);

          return {
            value: normalizedValue,
            color: colorDef.tbgr,
          };
        });
      mappings.push(mapping);
    }

    for (const mapping of mappings) {
      const thematicSettings: ThematicGradientSettingsProps = {
        colorScheme: ThematicGradientColorScheme.Custom,
        customKeys: mapping,
        mode: ThematicGradientMode.Stepped,
        stepCount: mapping.length,
      };

      const analysisStyle = ScientificVizApi.createAnalysisStyleForChannels(
        thematicChannel,
        thematicSettings
      );

      ScientificVizApi.setAnalysisStyle(viewport, analysisStyle);
      setIsAnimated(false);
      setCanBeAnimated(ScientificVizApi.styleSupportsAnimation(analysisStyle));
    }
  }, [viewport, thematicChannelData]);
//...

ScientificVizApi.ts

//...
export default class ScientificVizApi {
  public static async createBuilding(buildingId: string): Promise<Polyface> {
    const buildingData = (
      jsonBuildings as Record<
        string,
        {
          indexedMesh: {
            auxData: {
              channels: {
                dataType: number;
                inputName: string;
                name: string;
                data: { input: number; values: number[] }[];
              }[];
              indices: number[];
            };
            point: number[][];
            pointIndex: number[];
          };
        }
      >
    )[buildingId];

    const jsonString = JSON.stringify(buildingData);
    const polyBuilding = IModelJson.Reader.parse(
      JSON.parse(jsonString)
    ) as Polyface;

    return polyBuilding;
  }

  public static async createAllBuildings(): Promise<Polyface[]> {
    const buildingIds = Object.keys(jsonBuildings);
    const polyfaces: Polyface[] = [];

    for (const buildingId of buildingIds) {
      const polyface = await this.createBuilding(buildingId);
      if (polyface) {
        polyfaces.push(polyface);
      }
    }

    return polyfaces;
  }
//...

[pmconne]

Hi,

If you want in-depth debugging/diagnosis of your code, please narrow it down to a simple sandbox that illustrates the problem.

A quick perusal of the snippets of code you provided suggest that you are basing the range of your gradient on the min+max values of a single polyface, then applying the analysis style to all of your polyfaces, causing values outside of that min+max range to display using the gradient's margin color.
You can test this hypothesis by altering the margin color.

A view only has one AnalysisStyle at a time, applied to all of its contents. It's unclear to me from your code and screenshots what real-world data you're actually trying to visualize - maybe your example is just a prototype to help you work out how to do something real? Knowing the details of what you're trying to achieve (from a user perspective) will help.

[g3rezz]

Hi,

You can review the code in this Sandbox | scientific-viz-db-levels.

I'm not entirely certain what you mean by altering the margin color. In my understanding, for the visualization to display accurately, it typically involves mapping the min and max values.

I'm curious about handling multiple polyfaces with a single AnalysisStyle. How should the data be arranged to influence all polyfaces correctly? Do I need to create one polyface from multiple polyfaces? How should I go about it? Is it possible using the current data, or does the data need restructuring?

The visualization shows precalculated decibel levels (Lden, Lday, Levening, Lnight) to understand how noise pollution affects a neighborhood over 24 hours (Lden). For example, the visualization can aid in decision-making for urban planners.

I am eager to hear your thoughts and suggestions on optimizing the data structure for an effective visualization.

[pmconne]

I'm not entirely certain what you mean by altering the margin color

In ScientificVizWidget.tsx, add the marginColor line below:

      const thematicSettings: ThematicGradientSettingsProps = {
        colorScheme: ThematicGradientColorScheme.Custom,
        customKeys: mapping,
        mode: ThematicGradientMode.Stepped,
        stepCount: mapping.length,
        marginColor: 0x7f7f7f,
      };

The box in the center, previously black, now draws grey (margin color):

Earlier in that file you are iterating polyfaces and replacing the current (singular) decorator with a new one based on (only) the currently-iterated polyface:

    for (const polyface of polyfaces) {
      ScientificVizDecorator.decorator = new ScientificVizDecorator(
        viewport,
        polyface
      );

You then compute your maxScalar and minScalar from (only) the last polyface you iterated.

If you want the style to apply to all of the polyfaces, you must compute your min+max values from all of the polyfaces. You should probably refactor your code around having multiple polyfaces as the sample was designed for only a single polyface.

[g3rezz]

I've experimented with treating all buildings as one polyface and applying a single AnalysisStyle to achieve the desired visualization (as shown in Image 3 in my original post). However, this approach deviates from my intended outcome.

Ideally, I intended to have multiple polyfaces in the viewport with their own AnalysisStyle. This would enable separate selection and interaction for individual buildings, as well as the addition of specific information to each.

The current behavior is one polyface, one AnalysisStyle per viewport. Even when attempting to use the min+max values from all polyfaces, it leads to an undesirable (wrong) visualization because the AnalyisStyle has to be applied to one polyface. This results in using a single polyface for all buildings. As you mentioned, "A view only has one AnalysisStyle at a time, applied to all of its contents."

In conclusion, while I obtained a satisfactory visualization by treating all buildings as one polyface, the current behavior does not align with my original goal of having multiple polyfaces with their own AnalysisStyle in the viewport.

Thank you for your guidance.

[pmconne]

Thanks for following up. I agree that it should be possible to apply different analysis styles to different sets of decorations. The style should probably be specified on a graphic branch.