AG-16323 Fix options graph cache to be isolated per chart instance

Author: lsjroberts

packages/ag-charts-community/src/api/agCharts.ts

@@ -218,6 +218,7 @@ class AgChartsInternal {
             optionsMetadata,
             deltaOptions,
             stripSymbols,
+            chart?.id,
             apiStartTime
         );
 

packages/ag-charts-community/src/chart/series/polar/donutSeries.test.ts

@@ -3,7 +3,6 @@ import { afterEach, beforeEach, describe, expect, jest, test } from '@jest/globa
 import type { AgChartOptions, AgDonutSeriesOptions, AgPolarChartOptions } from 'ag-charts-types';
 
 import { AgCharts } from '../../../api/agCharts';
-import { OptionsGraph } from '../../../module/optionsGraph';
 import { Transformable } from '../../../scene/transformable';
 import type { Chart } from '../../chart';
 import type { AgChartProxy } from '../../chartProxy';
@@ -587,7 +586,6 @@ describe('DonutSeries', () => {
         let donutSeries: DonutSeries;
 
         beforeEach(async () => {
-            OptionsGraph.clearValueCache();
             const transactionOptions = prepareTestOptions({
                 theme: {
                     palette: {

packages/ag-charts-community/src/chart/series/polar/pieSeries.test.ts

@@ -3,7 +3,6 @@ import { afterEach, beforeEach, describe, expect, jest, test } from '@jest/globa
 import type { AgChartOptions, AgPieSeriesOptions, AgPolarChartOptions } from 'ag-charts-types';
 
 import { AgCharts } from '../../../api/agCharts';
-import { OptionsGraph } from '../../../module/optionsGraph';
 import { Transformable } from '../../../scene/transformable';
 import type { Chart } from '../../chart';
 import type { AgChartProxy } from '../../chartProxy';
@@ -725,7 +724,6 @@ describe('PieSeries', () => {
         let pieSeries: PieSeries;
 
         beforeEach(async () => {
-            OptionsGraph.clearValueCache();
             const transactionOptions = prepareTestOptions({
                 theme: {
                     palette: {

packages/ag-charts-community/src/module/optionsGraph.ts

@@ -43,7 +43,7 @@ import {
 const debug = Debug.create('opts', 'options-graph');
 
 export const createOptionsGraph = simpleMemorize(createOptionsGraphFn);
-export function createOptionsGraphFn(theme: ChartTheme, options: PlainObject) {
+export function createOptionsGraphFn(theme: ChartTheme, options: PlainObject, cachePrefix?: string) {
     return debug.group(
         'OptionsGraph.constructor()',
         () =>
@@ -53,7 +53,8 @@ export function createOptionsGraphFn(theme: ChartTheme, options: PlainObject) {
                 theme.params,
                 theme.palette,
                 theme.overrides,
-                theme.getTemplateParameters()
+                theme.getTemplateParameters(),
+                cachePrefix
             )
     );
 }
@@ -92,10 +93,6 @@ export class OptionsGraph extends AdjacencyListGraph<unknown, string> implements
     // A cache of values that persists between chart updates, use sparingly.
     private static readonly valueCache = new Map();
 
-    public static clearValueCache() {
-        OptionsGraph.valueCache.clear();
-    }
-
     public readonly paletteType: PaletteType;
 
     // The current priority order in which to resolve options values.
@@ -134,7 +131,8 @@ export class OptionsGraph extends AdjacencyListGraph<unknown, string> implements
         params: PlainObject | undefined = undefined,
         public readonly palette: PlainObject = {},
         private readonly overrides: PlainObject | undefined = undefined,
-        private readonly internalParams: Map<unknown, unknown> = new Map()
+        private readonly internalParams: Map<unknown, unknown> = new Map(),
+        private readonly cachePrefix: string = 'shared'
     ) {
         super(PATH_EDGE, OPERATION_EDGE, new Set([USER_PARTIAL_OPTIONS_EDGE, USER_OPTIONS_EDGE]));
 
@@ -514,12 +512,12 @@ export class OptionsGraph extends AdjacencyListGraph<unknown, string> implements
     }
 
     getCachedValue(path: string[], key: string): unknown {
-        const cacheKey = [...path, key].join('.');
+        const cacheKey = [this.cachePrefix, ...path, key].join('.');
         return OptionsGraph.valueCache.get(cacheKey);
     }
 
     setCachedValue(path: string[], key: string, value: unknown): void {
-        const cacheKey = [...path, key].join('.');
+        const cacheKey = [this.cachePrefix, ...path, key].join('.');
         OptionsGraph.valueCache.set(cacheKey, value);
     }
 

packages/ag-charts-community/src/module/optionsModule.ts

@@ -163,6 +163,7 @@ export class ChartOptions<T extends AgChartOptions = AgChartOptions> {
         metadata: ChartInternalOptionMetadata,
         deltaOptions?: DeepPartial<T> | null,
         stripSymbols = false,
+        cachePrefix?: string,
         apiStartTime?: number
     ) {
         this.optionMetadata = metadata ?? {};
@@ -217,7 +218,7 @@ export class ChartOptions<T extends AgChartOptions = AgChartOptions> {
         } else {
             ChartOptions.perfDebug(`ChartOptions.slowSetup()`);
             ({ activeTheme, processedOptions, themeParameters, annotationThemes, googleFonts, optionsGraph } =
-                this.slowSetup(processedOverrides, deltaOptions, stripSymbols));
+                this.slowSetup(processedOverrides, deltaOptions, stripSymbols, cachePrefix));
         }
 
         this.activeTheme = activeTheme;
@@ -274,7 +275,12 @@ export class ChartOptions<T extends AgChartOptions = AgChartOptions> {
         }
     }
 
-    private slowSetup(processedOverrides: Partial<T>, deltaOptions?: DeepPartial<T> | null, stripSymbols = false) {
+    private slowSetup(
+        processedOverrides: Partial<T>,
+        deltaOptions?: DeepPartial<T> | null,
+        stripSymbols = false,
+        cachePrefix?: string
+    ) {
         let options = deepClone(this.userOptions, ChartOptions.OPTIONS_CLONE_OPTS_FAST) as T & { type?: string };
 
         if (deltaOptions) {
@@ -352,7 +358,7 @@ export class ChartOptions<T extends AgChartOptions = AgChartOptions> {
         this.processSeriesOptions(options);
         this.processAxesOptions(options);
 
-        const optionsGraph = createOptionsGraph(activeTheme, options);
+        const optionsGraph = createOptionsGraph(activeTheme, options, cachePrefix);
         const resolvedOptions = optionsGraph.resolve() as any;
         const themeParameters = optionsGraph.resolveParams();
         const annotationThemes = optionsGraph.resolveAnnotationThemes();